Pelaksanaan JavaScript bagi kod bar kemajuan memuatkan halaman web adalah kemahiran javascript yang sangat mudah

Bar kemajuan halaman web boleh mencerminkan kemajuan pemuatan halaman web semasa dengan lebih baik Bar kemajuan pemuatan boleh dianimasikan dari 0% hingga 100% untuk menyelesaikan proses pemuatan halaman web. Walau bagaimanapun, penyemak imbas semasa tidak menyediakan antara muka untuk kemajuan pemuatan halaman, yang bermaksud bahawa halaman tidak dapat mengembalikan kemajuan pemuatan sebenar halaman dengan tepat Dalam artikel ini, kami menggunakan jQuery untuk mencapai kesan bar kemajuan pemuatan halaman.

HTML

Perkara pertama yang perlu kita ketahui ialah pada masa ini tiada penyemak imbas boleh mendapatkan secara langsung saiz objek yang sedang dimuatkan. Oleh itu, kami tidak boleh mencapai 0-100% proses pemuatan dan paparan melalui saiz data.

Oleh itu, kita perlu menggunakan ciri pemuatan baris demi baris bagi kod html, tetapkan nod dalam beberapa baris langkau bagi keseluruhan kod halaman dan berikan anggaran maklum balas kemajuan kabur untuk mencapai kesan pemuatan kemajuan. Maksud umum ialah: setiap kali halaman dimuatkan ke dalam kawasan yang ditentukan, hasil kemajuan (n)% dikembalikan Dengan menetapkan berbilang nod, tujuan memaparkan kemajuan pemuatan langkah demi langkah tercapai.

Jika terdapat halaman, ia dibahagikan kepada empat bahagian mengikut blok: pengepala, kandungan kiri, bar sisi kanan dan pengaki Kami menganggap empat bahagian ini sebagai empat nod Apabila halaman memuatkan setiap nod, tetapkan anggaran memuatkan Peratusan, struktur halaman adalah seperti berikut:

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div> 

Kemudian kami menambah bar kemajuan.memuatkan ke baris pertama di bawah 6c04bd5ca3fcae76e30b72ad730ca86d.

<div class="loading"></div> 

CSS

Kita perlu menetapkan gaya bar kemajuan pemuatan, tetapkan warna latar belakang, ketinggian, kedudukan, keutamaan, dsb.

.loading{ 
 background:#FF6100; //设置进度条的颜色 
 height:5px; //设置进度条的高度 
 position:fixed; //设定进度条跟随屏幕滚动 
 top:0; //将进度条固定在页面顶部 
 z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 
} 

jQuery

Seterusnya, kita perlu menambah animasi kemajuan di belakang setiap nod dan menggunakan jQuery untuk melaksanakannya.

<div id="header"> 
页头部分</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'33%'},50); 
 //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'55%'},50); 
//第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'80%'},50); 
//第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
 $('.loading').animate({'width':'100%'},50); 
 //第四个进度节点 
</script> 

Dapat dilihat bahawa selepas tidak memuatkan nod, jQuery memanggil kaedah animasi animate() untuk menukar lebar bar kemajuan Setiap perubahan nod mengambil masa 50 milisaat untuk menjadikan bar kemajuan kelihatan lebih lancar, dan akhirnya berubah daripada 0 % hingga 100%, animasi kemajuan bar kemajuan selesai.

Apabila bar kemajuan mencapai 100%, halaman dimuatkan Langkah terakhir yang perlu dilakukan ialah menyembunyikan bar kemajuan.

$(document).ready(function(){ 
 $('.loading').fadeOut();  
});