Verwenden Sie einfache Komponenten zum Vorladen von Bildern, um das Benutzererlebnis mobiler HTML5-Seiten zu verbessern

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, die einfach zu implementieren ist und keine schwachen Funktionen aufweist. 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 dieses Bild direkt Das geladene Bild kann sofort auf der Seite gerendert werden. 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 Blenden Sie die relevanten Informationen auf der Seite 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 Fehler beim Laden des Bildes die Funktionalität des Loaders nicht beeinträchtigen sollte.
3) Das Problem der Zeitüberschreitung beim Laden von Bildern
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 Lade-Timeout festgelegt werden, wenn das Laden nach dem Timeout aller 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 aktiviert werden angezeigt werden.
Basierend auf den oben genannten Anforderungen lautet die in diesem Artikel bereitgestellte Implementierung:

JavaScript-CodeInhalt in die Zwischenablage kopieren

(function () {    
function isArray(obj) {    
return Object.prototype.toString.call(obj) === '[object Array]';    
}    
/**   
* @param imgList 要加载的图片地址列表，['aa/asd.png','aa/xxx.png']   
* @param callback 每成功加载一个图片之后的回调，并传入“已加载的图片总数/要加载的图片总数”表示进度   
* @param timeout 每个图片加载的超时时间，默认为5s   
*/    
var loader = function (imgList, callback, timeout) {    
timeout = timeout || 5000;    
imgList = isArray(imgList) && imgList || [];    
callback = typeof(callback) === 'function' && callback;    
var total = imgList.length,    
loaded = 0,    
imgages = [],    
_on = function () {    
loaded < total && (++loaded, callback && callback(loaded / total));    
};    
if (!total) {    
return callback && callback(1);    
}    
for (var i = 0; i < total; i++) {    
imgages[i] = new Image();    
imgages[i].onload = imgages[i].onerror = _on;    
imgages[i].src = imgList[i];    
}    
/**   
* 如果timeout * total时间范围内，仍有图片未加载出来（判断条件是loaded < total），通知外部环境所有图片均已加载   
* 目的是避免用户等待时间过长   
*/    
setTimeout(function () {    
loaded < total && (loaded = total, callback && callback(loaded / total));    
}, timeout * total);    
};    
"function" === typeof define && define.cmd ? define(function () {    
return loader    
}) : window.imgLoader = loader;    
})();

Verwendung (entsprechend test.html im Code):

XML/HTML-Code Inhalt in die Zwischenablage kopieren

<script src="../js/imgLoader.js"></script>    
<script>    
imgLoader([&#39;../img/page1.jpg&#39;, &#39;../img/page2.jpg&#39;, &#39;../img/page3.jpg&#39;], function(percentage){    
console.log(percentage)    
});    
</script>

Ergebnisse ausführen:

2. demo说明
本文开篇给出的效果，对应的页面是index.html，关于这个效果还有两个问题需要说明：
1）它用了之前这篇博客Hammer.js+轮播原理实现简洁的滑屏功能介绍的滑屏思路，并把它的一些逻辑包装在了swipe.js，对外提供了一个全局变量Swipe，这个模块有一个init的方法，以便外部通过调用Swipe.init()就能初始化滑屏相关的功能，原来没有提供这个init方法，在js加载完毕就会初始化滑屏功能，有了这个init方法就可以把滑屏的逻辑延迟到加载完毕的时候去初始化。index.html一共引用了5个js：

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

<script src="js/zepto.js"></script>    
<script src="js/transition.js"></script>    
<script src="js/hammer.js"></script>    
<script src="js/imgLoader.js"></script>    
<script src="js/swipe.js"></script>

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

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

//模拟加载慢的效果    
var callbacks = [];    
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
var i = callbacks.length;    
callbacks.push(function(){    
setTimeout(function(){    
var percentT = percentage * 100;    
$('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
$('#loader__progress')[0].style.width = percentT + '%';    
if (percentage == 1) {    
setTimeout(function(){    
$('#loader').remove();    
Swipe.init();    
}, 600);    
}    
callbacks[i + 1] && callbacks[i + 1]();    
},600);    
});    
if(percentage == 1) {    
callbacks[0]();    
}    
});

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

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

imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {    
var percentT = percentage * 100;    
$('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');    
$('#loader__progress')[0].style.width = percentT + '%';    
if (percentage == 1) {    
$('#loader').remove();    
Swipe.init();    
}    
});

3. 注意事项
预加载是一种比较常见的实现效果，但是在使用的时候，有些问题需要注意：
1）什么时候用
页面大的时候用，一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候，可以考虑使用。
2）尽量使用sprite图片
3）加载效果实现的时候，尽量不用图片，即使要用也应该用很小的图片，否则加载效果卡在那就没有意义了。
4. 总结
本文主要介绍了一个简单的图片预加载器，可应用于h5移动页面的开发当中，在它的思路之下，如果有必要的话，还可以对它进行一些改造，用它来加载其它类型的资源，比如音频或者视频文件，毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的，还有一种图片懒加载的技术，现在网上已经有比较好用的jquery插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究。同时感谢大家一直以来对PHP中文网的支持！

更多利用简洁的图片预加载组件提升html5移动页面的用户体验 相关文章请关注PHP中文网！