Verwenden Sie einfache Komponenten zum Vorladen von Bildern, um die Benutzererfahrung von HTML5-Mobilseiten zu verbessern. _HTML5-Tutorial-Fähigkeiten

Bei der Arbeit an mobilen h5-Seiten müssen Sie meiner Meinung nach auf eine Situation gestoßen sein, in der die Seite geöffnet wurde, die darin enthaltenen Bilder jedoch nicht geladen wurden. Obwohl dieses Problem die Funktion der Seite nicht beeinträchtigt, ist es nicht förderlich zum Benutzererlebnis. Unabhängig von der Netzwerkgeschwindigkeit gibt es viele Möglichkeiten, dieses Problem zu lösen: Die einfachste besteht darin, die Leistung unter Aspekten wie der Zusammenführung von HTTP-Anfragen, der Cache-Verwaltung, der Bildkomprimierung usw. zu optimieren Beim Laden der Seite wird nicht sofort der erste Bildschirm angezeigt, sondern erst nach Abschluss des Ladevorgangs der Hauptinhalt der Seite kann das Problem lösen. Obwohl dieser Ladeeffekt die Surfzeit des Benutzers in Anspruch nimmt, können wir ihn schöner und interessanter gestalten, sodass er das Benutzererlebnis nicht beeinträchtigt. Dieser Artikel setzt diese Idee um und stellt eine sehr einfache Komponente zum Vorladen von Bildern bereit. Sie ist einfach zu implementieren und weist keine schwachen Funktionen auf. Sie sollte für Sie bei der Erstellung mobiler Seiten von Nutzen sein.
Wirkung:

1. Umsetzungsideen

Das img-Tag in HTML und das Hintergrundbild in CSS veranlassen den Browser, das zugehörige Bild zu laden. Wenn das Bild jedoch bereits geladen wurde, verwendet der Browser das geladene Bild direkt, sodass es auf dem gerendert werden kann Seite sofort. Erstellen Sie über Javascript Bildobjekte und setzen Sie dann das src-Attribut dieser Objekte auf die Adresse des zu ladenden Bildes. Dies kann auch dazu führen, dass der Browser das Bild lädt. Sie können dies verwenden, um die Funktion zum Vorladen von Bildern zu realisieren: Erste Verwendung diejenigen, die sich auf die Seite beziehen, blenden Sie die Elemente des Bildes aus, laden Sie das Bild dann mit js, warten Sie, bis alle Bilder geladen sind, und zeigen Sie dann die ausgeblendeten Elemente an. Dies ist jedoch nur eine grundlegende Implementierungsidee. Um eine Vorladekomponente mit einer robusteren Funktion zu vervollständigen, gibt es noch drei Probleme:
1) Fortschrittsproblem
Da das Vorladen gleichzeitig erfolgt, muss eine Vorladekomponente vorhanden sein Dies hat auch zur Folge, dass der Ladefortschritt dem externen Kontext in Echtzeit mitgeteilt werden muss. Es gibt zwei Möglichkeiten, den Fortschritt zu implementieren, und die zweite ist die Anzahl der geladenen Dateien/Gesamtzahl der Dateien. Im Browser ist die Verwendung der ersten Methode unrealistisch Es gibt keine native Möglichkeit, dies zu tun, daher können wir nur die zweite Methode verwenden.
2) Das Problem des Bildladefehlers
Wenn beispielsweise 4 Bilder vorhanden sind, wurden 50 % davon geladen, und beim Laden des dritten Bildes tritt ein Fehler auf. Sollte der Fortschritt auf 75 % zurückgeführt werden. ? Die Antwort lautet: Ja. Geschieht dies nicht, wird der Fortschritt nie 100 % erreichen und der Hauptinhalt der Seite kann nicht angezeigt werden. Das Laden des Bilds schlägt zwar fehl, das hat jedoch nichts mit dem Ladeprogramm zu tun nicht vorhanden? Dies bedeutet, dass ein Bildladefehler die Funktionalität des Loaders nicht beeinträchtigen sollte.
3) Das Problem der Bildladezeitüberschreitung
Das Bild kann nicht zu lange geladen werden, da der Benutzer sonst im Ladeeffekt bleibt und den Hauptinhalt nicht sehen kann und die Wartezeit des Benutzers unkontrolliert verlängert wird, was zur Folge hat Dies führt zu einer Verschlechterung der Benutzererfahrung. Dies widerspricht der ursprünglichen Absicht des Laders. Daher sollte für jedes Bild ein Ladezeitlimit festgelegt werden. Wenn das Laden nach Ablauf des Zeitlimits für alle Bilder nicht abgeschlossen ist, sollte das Laden aktiv abgebrochen werden, der externe Kontext sollte benachrichtigt werden, dass das Laden abgeschlossen ist, und der Hauptinhalt sollte abgeschlossen sein angezeigt.
Basierend auf den oben genannten Anforderungen lautet die in diesem Artikel bereitgestellte Implementierung:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. (Funktion () {    
2. Funktion isArray(obj) {    
3. return Object.prototype.toString.call(obj) === '[object Array]' ;    
4. }    
5. /**
6. * @param imgList Liste der zu ladenden Bildadressen, ['aa/asd.png','aa/xxx.png']
7. * @param callback Der Rückruf, nachdem jedes Bild erfolgreich geladen wurde, und die „Gesamtzahl der geladenen Bilder/Gesamtzahl der zu ladenden Bilder“ wird übergeben, um den Fortschritt anzuzeigen
8. * @param timeout Das Zeitlimit für das Laden jedes Bildes, der Standardwert beträgt 5 Sekunden
9. */    
10. var loader = function (imgList, callback, timeout) {    
11. timeout = timeout || 5000;    
12. imgList = isArray(imgList) && imgList || [];    
13. callback = typeof(callback) === 'function' && callback;    
14. var total = imgList.length,    
15. geladen = 0,    
16. Bilder = [],    
17. _on = Funktion () {    
18. geladen < insgesamt && ( geladen, Rückruf && Rückruf(geladen / gesamt));    
19. };    
20. if (!total) {    
21. return callback && callback(1);    
22. }    
23. für (var i = 0; i < total; i ) {    
24. images[i] = new Image();    
25. imgages[i].onload = imgages[i].onerror = _on;    
26. imgages[i].src = imgList[i];    
27. }    
28. /**
29. * Wenn es noch Bilder gibt, die nicht innerhalb des Timeout-*Gesamtzeitbereichs geladen wurden (die Beurteilungsbedingung ist geladen < gesamt), benachrichtigen Sie die externe Umgebung, dass alle Bilder geladen wurden
30. * Der Zweck besteht darin, zu vermeiden, dass Benutzer zu lange warten
31. */    
32. setTimeout(function () {    
33. geladen < total && (loaded = total, callback && callback(loaded / total));    
34. }, Timeout * gesamt);    
35. };
36. "function" === typeof define && define.cmd ? define(Funktion () {
37. RückgabeLader
38. }): window.imgLoader = Loader;
})();

Verwendung (entsprechend test.html im Code):

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <script src="../js/ imgLoader.js">script> 
2. <Skript> 
imgLoader(['../img/page1.jpg', '../img/page2.jpg', '../img/page3.jpg'], function(percentage){
console.log(Prozentsatz)
});
6. Skript> 

Laufergebnis:

2. Demo-Beschreibung
Der am Anfang dieses Artikels angegebene Effekt, die entsprechende Seite ist index.html, es gibt zwei Probleme, die behoben werden müssen Dieser Effekt wird erläutert: 1) Es nutzt die im vorherigen Blog vorgestellte Idee des Schiebebildschirms Hammer.js Karussellprinzip, um eine einfache Schiebebildschirmfunktion zu implementieren
und verpackt einen Teil seiner Logik in Wischen. js, Eine globale Variable Swipe wird für die Außenwelt bereitgestellt, sodass die mit dem Schiebebildschirm verbundenen Funktionen extern durch Aufrufen von Swipe.init() initialisiert werden können Wird nach dem Laden der js-Funktion initialisiert. Mit dieser Init-Methode kann die Schiebebildschirmlogik verzögert werden, bis der Ladevorgang abgeschlossen ist. index.html verweist auf insgesamt 5 js:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <script src="js/zepto.js ">Skript>    
2. <script src="js/ transit.js">script>    
3. <script src="js/ hammer.js">script>    
4. <script src="js/ imgLoader.js">script>    
5. <script src="js/ swipe.js">script>   

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

XML/HTML-Code复制内容到剪贴板

1. //模拟加载慢的效果    
2. var Rückrufe = [];    
3. imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], Funktion (Prozentsatz) {    
4. var i = Callbacks.length;    
5. callbacks.push(function(){    
6. setTimeout(function(){    
7. var ProzentT = Prozentsatz * 100;    
8. $('#loader__info').html('Loading '   (parseInt(percentT))   '%');    
9. $('#loader__progress')[0].style.width = percentT   '%';    
10. wenn (Prozentsatz == 1) {    
11. setTimeout(function(){    
12. $('#loader').remove();    
13. Swipe.init();    
14. }, 600);    
15. }    
16. callbacks[i   1] && callbacks[i   1]();    
17. },600);    
18. });    
19. if(Prozentsatz == 1) {    
20. Rückrufe[0]();    
21. }    
22. });   

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

XML/HTML-Code复制内容到剪贴板

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

3. Notes
Le préchargement est un effet d'implémentation relativement courant, mais lors de son utilisation, il convient de prêter attention à certains problèmes :
1. ) Quoi Utiliser
lorsque la page est volumineuse. Généralement, vous devriez envisager de l'utiliser si la taille de la page dépasse 3 Mo. La page contient des images avec une quantité de données relativement importante. Vous pouvez envisager de l'utiliser lors du test du téléphone mobile. peut clairement montrer que le chargement est lent.
2) Essayez d'utiliser des images de sprite
3) Lors de l'implémentation de l'effet de chargement, essayez de ne pas utiliser d'images Même si vous souhaitez les utiliser, vous devez utiliser de très petites images, sinon l'effet de chargement y restera bloqué. et cela n'aura aucun sens.
4. Résumé
Cet article présente principalement un simple préchargeur d'images, qui peut être appliqué au développement de pages mobiles h5, si nécessaire. peut également le modifier et l'utiliser pour charger d'autres types de ressources, tels que des fichiers audio ou vidéo. Après tout, ces types d'objets DOM fournissent également des propriétés et des rappels similaires aux objets Image. Contrairement à la méthode de préchargement, il existe également une technologie de chargement paresseux d'images sur Internet. Il existe déjà des plug-ins jquery relativement faciles à utiliser, mais cela vaut toujours la peine d'en apprendre davantage sur ses idées et ses points de mise en œuvre. fais-le quand j'ai le temps. En même temps, merci à tous pour votre soutien continu au site Web de Script House !