Bagaimanakah saya boleh menunjukkan div memuatkan halaman sehingga halaman dimuatkan?-tutorial js-php.cn

Bagaimanakah saya boleh menunjukkan div memuatkan halaman sehingga halaman dimuatkan?

王林

Lepaskan： 2023-09-11 10:17:09

ke hadapan

1041 orang telah melayarinya

如何显示页面加载 div 直到页面加载完成？

Daripada memaparkan keseluruhan skrin putih atau hitam semasa halaman dimuatkan, penunjuk pemuatan ditunjukkan, yang turut meningkatkan pengalaman pengguna apl.

Kini, terdapat beberapa perpustakaan yang boleh menunjukkan penunjuk pemuatan. Walau bagaimanapun, kami boleh mencipta div penunjuk pemuatan tersuai menggunakan HTML dan CSS.

Dalam tutorial ini kami akan menggunakan HTML, CSS dan JavaScript untuk memaparkan div memuatkan halaman sehingga halaman dimuatkan

Gunakan acara onreadystatechange untuk memaparkan penunjuk pemuatan semasa memuatkan halaman

Dalam JavaScript, apabila status halaman web berubah, acara onreadystatechange akan dicetuskan. Keadaan pertama ialah "interaktif", yang bermaksud halaman web sedang berinteraksi dan telah mula dimuatkan. Peringkat kedua ialah "Lengkap", iaitu, halaman web berjaya dimuatkan.

Jadi kita boleh menyembunyikan teks kandungan dan menunjukkan penunjuk pemuatan dalam semua keadaan lain, dan dalam keadaan "Selesai" kita boleh menyembunyikan penunjuk pemuatan dan menunjukkan teks kandungan.

tatabahasa

Pengguna boleh menunjukkan dan menyembunyikan penunjuk pemuatan berdasarkan status dokumen dengan mengikut sintaks berikut.

document.onreadystatechange = function () {
   if (document.readyState !== "complete") {
      
      // show loading indicator and hide body
   } else {
      
      // show body, and hide loading indicator
   }
};

Salin selepas log masuk

Dalam sintaks di atas, kami akan memanggil fungsi ini apabila status dokumen berubah. Ia menyemak sama ada status adalah "Lengkap", kemudian menyembunyikan penunjuk pemuatan dan memaparkan badan.

Contoh

Dalam contoh di bawah, kami telah mencipta div menggunakan div "loading_indicator" dan menggunakan beberapa CSS untuk menjadikannya penunjuk pemuatan bulat.

Dalam JavaScript, kami menggunakan acara onreadystatechange. Fungsi ini dilaksanakan apabila keadaan berubah. Dalam fungsi tersebut, kami menggunakan sifat "readyState" dokumen untuk mendapatkan keadaan semasa dokumen. Jika status semasa dokumen sama dengan "Lengkap", kami boleh mengakses dan menyembunyikan penunjuk pemuatan dan memaparkan keseluruhan badan dokumen. Jika tidak, kami boleh menunjukkan penunjuk pemuatan dan menyembunyikan badan dokumen.

<html>
<head>
   <style>
      #loading_indicator {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: auto;
         border: 10px solid grey;
         border-radius: 50%;
         border-top: 10px solid blue;
         width: 100px;
         height: 100px;
         animation: spinIndicator 1s linear infinite;
      }
      @keyframes spinIndicator {
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <h2>Using the <i> onreadystatechange event </i> to show page loading div in JavaScript.</h2>
   <div id = "loading_indicator"> </div>
   <h3> Page Loaded successfully.</h3>
   <img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
   <script>
      document.onreadystatechange = function () {
         if (document.readyState !== "complete") {
            document.querySelector("body").style.visibility = "hidden";
            document.getElementById("loading_indicator").style.visibility = "visible";
         } else {
            setTimeout(() => {
               document.getElementById("loading_indicator").style.display ="none";
               document.querySelector("body").style.visibility = "visible";
            }, 3000)
         }
      };
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami menggunakan jQuery untuk memaparkan penunjuk pemuatan apabila halaman dimuatkan. Kami menambahkan HTML dan CSS pada badan dokumen.

Dalam JQuery, kami menggunakan kaedah append() untuk menambahkan penunjuk pemuatan pada badan dokumen. Selepas itu kami menggunakan acara "muat" untuk menyemak sama ada halaman telah dimuatkan dan berdasarkan ini kami mengalih keluar penunjuk pemuatan daripada halaman web.

<html>
<head>
   <style>
      #indicator {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0; 
         margin: auto;
         border: 10px solid grey;
         border-radius: 50%;
         border-top: 10px solid red;
         width: 100px;
         height: 100px;
         animation: spin 1s linear infinite;
      }
      @keyframes spin {
         0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
         }
         100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
         }
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
   <h2>Using the <i> JQuery load event </i> to show page loading div in JavaScript.</h2>
   <h3>Page Loaded successfully.</h3>
   <img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
   <script>
      $('body').append('<div style = "" id = "indicator"> <div class="loader"> </div> </div>');
      $(window).on('load', function () {
         setTimeout(removeLoader, 2000);
      });
      function removeLoader() {
         $("#indicator").fadeOut(1000, function () {
            $("#indicator").remove();
         });
      }
   </script>
</body>
</html>

Salin selepas log masuk

Kami belajar menggunakan JavaScript dan jQuery untuk memaparkan penunjuk pemuatan apabila halaman dimuatkan. Dalam contoh pertama, kami menggunakan acara onreadystatechange JavaScript untuk menunjukkan dan menyembunyikan penunjuk pemuatan berdasarkan sama ada halaman dimuatkan.

Dalam contoh kedua, kami menggunakan acara pemuatan JQuery untuk menunjukkan dan menyembunyikan penunjuk pemuatan

Atas ialah kandungan terperinci Bagaimanakah saya boleh menunjukkan div memuatkan halaman sehingga halaman dimuatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!