Gunakan komponen pramuat imej mudah untuk meningkatkan pengalaman pengguna kemahiran tutorial _html5 halaman mudah alih html5

Apabila bekerja pada halaman mudah alih h5, saya percaya anda mesti menghadapi situasi di mana halaman telah dibuka, tetapi imej di dalamnya tidak dimuatkan Walaupun masalah ini tidak menjejaskan fungsi halaman, ia tidak kondusif kepada pengalaman pengguna. Tanpa mengira kelajuan rangkaian, terdapat banyak cara untuk menyelesaikan masalah ini: yang paling asas ialah mengoptimumkan prestasi dari aspek seperti penggabungan permintaan http, pengurusan cache, pemampatan imej, dan lain-lain adalah dengan pra-memproses semua imej yang digunakan; halaman. Dalam proses pemuatan, apabila pengguna membuka halaman, skrin pertama tidak dipaparkan dengan serta-merta, kesan pemuatan sumber dipaparkan dahulu, dan kemudian kandungan utama halaman dipaparkan selepas pemuatan ini boleh menyelesaikan masalah. Walaupun kesan pemuatan ini mengambil masa menyemak imbas pengguna, kami boleh menjadikannya lebih cantik dan menarik, jadi ia tidak akan menjejaskan pengalaman pengguna. Artikel ini melaksanakan idea ini dan menyediakan komponen pramuat imej yang sangat mudah Ia mudah untuk dilaksanakan dan tidak lemah dalam fungsi Ia harus menjadi nilai rujukan kepada anda semasa membuat halaman mudah alih.
Kesan:

1. Idea pelaksanaan

Teg img dalam HTML dan imej latar belakang dalam CSS akan mencetuskan pelayar untuk memuatkan imej yang berkaitan Walau bagaimanapun, jika imej telah dimuatkan, penyemak imbas akan terus menggunakan imej yang dimuatkan, oleh itu Ia boleh dipaparkan pada. halaman serta-merta. Melalui javascript, cipta objek Imej, dan kemudian tetapkan atribut src objek ini kepada alamat imej yang akan dimuatkan, yang juga boleh mencetuskan penyemak imbas untuk memuatkan imej Anda boleh menggunakan ini untuk merealisasikan fungsi pramuat imej: penggunaan pertama yang berkaitan dengan halaman Sembunyikan elemen imej, kemudian gunakan js untuk memuatkan imej, tunggu sehingga semua imej dimuatkan, dan kemudian paparkan elemen tersembunyi. Walau bagaimanapun, ini hanyalah idea pelaksanaan asas Untuk melengkapkan komponen pramuat dengan fungsi yang lebih mantap, masih terdapat tiga masalah:
1) Masalah kemajuan
Memandangkan pramuat dilakukan pada masa yang sama, komponen pramuat mesti juga dilakukan. Kesannya ialah kemajuan pemuatan perlu dimaklumkan kepada konteks luaran dalam masa nyata. Terdapat dua cara untuk melaksanakan kemajuan Yang pertama ialah saiz data yang dimuatkan/jumlah saiz data, dan yang kedua ialah bilangan fail yang dimuatkan/jumlah fail Dalam penyemak imbas, adalah tidak realistik untuk menggunakan kaedah pertama bukan cara asli untuk melakukannya, jadi kita hanya boleh menggunakan kaedah kedua.
2) Masalah kegagalan memuatkan imej
Sebagai contoh, jika terdapat 4 imej, 50% daripadanya telah dimuatkan, dan ralat berlaku semasa memuatkan imej ketiga Sekiranya kemajuan diumpan semula kepada 75%. ? Jawapannya ialah: ya. Jika ini tidak dilakukan, kemajuan tidak akan mencapai 100%, dan kandungan utama halaman tidak akan mempunyai peluang untuk dipaparkan Walaupun pemuatan imej mungkin gagal, ia tidak ada kaitan dengan pemuat itu sendiri tidak wujud? Ini bermakna kegagalan pemuatan imej tidak seharusnya menjejaskan kefungsian pemuat.
3) Masalah tamat masa memuatkan imej
Imej tidak boleh dimuatkan terlalu lama, jika tidak, pengguna akan kekal dalam kesan pemuatan dan tidak dapat melihat kandungan utama, dan masa menunggu pengguna akan dilanjutkan tanpa kawalan, mengakibatkan dalam penurunan dalam pengalaman pengguna Ini akan Ia bertentangan dengan niat asal pemuat. Oleh itu, tamat masa pemuatan harus ditetapkan untuk setiap imej Jika pemuatan tidak selesai selepas tamat masa semua imej, pemuatan harus ditinggalkan secara aktif, konteks luaran harus dimaklumkan bahawa pemuatan telah selesai, dan kandungan utama haruslah diisi. dipaparkan.
Berdasarkan keperluan di atas, pelaksanaan yang disediakan dalam artikel ini ialah:

Kod JavaScriptSalin kandungan ke papan keratan

1. (fungsi () {    
2. fungsi isArray(obj) {    
3. kembali Object.prototype.toString.call(obj) === '[objek Array]' ;    
4. }    
5. /**
6. * @param imgList Senarai alamat imej untuk dimuatkan, ['aa/asd.png','aa/xxx.png']
7. * Panggilan balik @param Panggilan balik selepas setiap imej berjaya dimuatkan dan "jumlah imej yang dimuatkan/jumlah imej yang akan dimuatkan" dihantar untuk menunjukkan kemajuan
8. * @param tamat masa tamat masa untuk memuatkan setiap imej, lalainya ialah 5s
9. */    
10. var pemuat = fungsi (imgList, panggilan balik, masa tamat) {    
11. masa tamat = masa tamat || 5000;    
12. imgList = isArray(imgList) && imgList || [];    
13. panggilan balik = jenis(panggilan balik) === 'fungsi' && panggilan balik;    
14. var jumlah = imgList.length,    
15. dimuatkan = 0,    
16. imej = [],    
17. _on = fungsi () {    
18. dimuatkan 
19. };    
20. jika (!jumlah) {    
21. kembali panggil balik && panggil balik(1);    
22. }    
23. untuk (var i = 0; i 
24. imej[i] = baharu Imej();    
25. imej[i].onload = imej[i].onerror = _on;    
26. imej[i].src = imgList[i];    
27. }    
28. /**
29. * Jika masih terdapat gambar yang belum dimuatkan dalam tempoh tamat masa * jumlah julat masa (syarat penghakiman dimuatkan
30. * Tujuannya adalah untuk mengelakkan pengguna menunggu terlalu lama
31. */    
32. setTimeout(fungsi () {    
33. dimuatkan 
34. }, masa tamat * jumlah);    
35. };
36. "fungsi" === jenis tentukan && tentukan.cmd ? >fungsi () {
37. pulangan pemuat
}): window.imgLoader = pemuat;
38. })();
Penggunaan (sepadan dengan test.html dalam kod):

Kod XML/HTML

Salin kandungan ke papan keratan

skrip src="../js/ imgLoader.js">skrip> 

skrip>  imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], fungsi(peratusan){

console.log(peratusan)

});

skrip> 

Hasil jalankan:

2. Penerangan demo

Kesan yang diberikan pada permulaan artikel ini, halaman yang sepadan ialah index.html, terdapat dua isu yang perlu diterangkan tentang kesan ini : 1) Ia menggunakan idea skrin gelongsor yang diperkenalkan dalam blog sebelumnya
Prinsip karusel Hammer.js untuk melaksanakan fungsi skrin gelongsor mudah dan membungkus beberapa logiknya dalam leret. js, Leret pembolehubah global disediakan kepada dunia luar Modul ini mempunyai kaedah init supaya fungsi berkaitan skrin gelongsor boleh dimulakan secara luaran dengan memanggil Swipe.init( Pada asalnya, kaedah init ini tidak disediakan akan dimulakan selepas js dimuatkan Fungsi, dengan kaedah init ini, logik skrin gelongsor boleh ditangguhkan sehingga pemuatan selesai untuk dimulakan. index.html merujuk sejumlah 5 js:
Kod XML/HTML

Salin kandungan ke papan keratan

1. skrip src="js/zepto.js ">skrip>    
2. skrip src="js/ transition.js">skrip>    
3. skrip src="js/ hammer.js">skrip>    
4. skrip src="js/ imgLoader.js">skrip>    
5. skrip src="js/ swipe.js">skrip>   

其中 imgloader.js 就是前面介绍图片加载器的实现, 前三个 js 都是为最后一个 swipe.js 服务的, 感兴趣的可以继续我的博客利用轮播原理结合 Hammer.js 实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理视的重点，不了解swipe.js不会影响理视的重点，不了解我在demo中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果加载的效果，最守家进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个memuatkan效果，实现方式是：

Kod XML/HTML复制内容到剪贴板

1. //模拟加载慢的效果   
2. var panggilan balik = [];    
3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], fungsi (peratusan) {    
4. var i = panggilan balik.panjang;    
5. panggilan balik.push(fungsi(){    
6. setTimeout(function(){    
7. var peratusT = peratusan * 100;    
8. $('#loader__info').html('Memuatkan '   (parseInt(percentT))   '%');    
9. $('#loader__progress')[0].style.width = peratusT   '%';    
10. jika (peratusan == 1) {    
11. setTimeout(function(){    
12. $('#loader').remove();    
13. Swipe.init();    
14. }, 600);    
15. }    
16. panggilan balik[i   1] && panggilan balik[i   1]();    
17. },600);    
18. });    
19. jika(peratusan == 1) {    
20. panggilan balik[0]();    
21. }    
22. });   

在真实环境，最好还是不要刻意去加这种延迟，没必要为了让用户看刻意去加这种延迟，没必要为了让用户看到作不效果，就浪费它不必要的等待时间，所以真实环境还是应该用下面的代码：

Kod XML/HTML复制内容到剪贴板

1. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], fungsi (peratusan) {    
2. var peratusT = peratusan * 100;    
3. $('#loader__info').html('Memuatkan '   (parseInt(percentT))   '%');    
4. $('#loader__progress')[0].style.width = peratusT   '%';    
5. jika (peratusan == 1) {    
6. $('#loader').remove();    
7. Swipe.init();    
8. }    
9. });   

3. Hinweise
Vorabladen ist ein relativ häufiger Implementierungseffekt, aber bei seiner Verwendung müssen einige Probleme beachtet werden:
1 ) Was verwenden
, wenn die Seite groß ist? Wenn die Seite größer als 3 MB ist, können Sie die Verwendung beim Mobiltelefontest in Betracht ziehen kann deutlich zeigen, dass das Laden langsam ist.
2) Versuchen Sie, Sprite-Bilder zu verwenden.
3) Versuchen Sie, beim Implementieren des Ladeeffekts keine Bilder zu verwenden. Auch wenn Sie diese verwenden möchten, sollten Sie sehr kleine Bilder verwenden, da sonst der Ladeeffekt dort hängen bleibt und es wird bedeutungslos sein.
4. Zusammenfassung
In diesem Artikel wird hauptsächlich ein einfacher Bild-Preloader vorgestellt, der bei Bedarf auf die Entwicklung mobiler h5-Seiten angewendet werden kann Sie können es auch ändern und zum Laden anderer Arten von Ressourcen verwenden, z. B. Audio- oder Videodateien. Schließlich bieten diese Arten von DOM-Objekten auch ähnliche Eigenschaften und Rückrufe wie Bildobjekte. Im Gegensatz zur Vorlademethode gibt es auch eine Technologie zum verzögerten Laden von Bildern. Es gibt bereits relativ einfach zu verwendende JQuery-Plug-Ins, aber es lohnt sich, mehr über deren Ideen und Implementierungspunkte zu erfahren Mach es, wenn ich Zeit für die Recherche habe. Gleichzeitig möchten wir Ihnen allen für Ihre anhaltende Unterstützung der Script House-Website danken!