Verwenden Sie Komponenten zum Vorladen von Bildern, um die Benutzererfahrung 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.

Effekt (img_loader.rar):

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 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 robusteren Funktionen zu vervollständigen, gibt es immer noch drei Probleme:

1) Fortschrittsproblem

Aufgrund des gleichzeitigen Vorladens , Sie müssen auch einen Vorladeeffekt erstellen, der eine Echtzeitbenachrichtigung über den Ladefortschritt an den externen Kontext erfordert. 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) Problem beim Laden von Bildern

Beispielsweise sind 4 Bilder vorhanden, von denen 50 % geladen wurden, und beim Laden des dritten Bildes ist ein Fehler aufgetreten. Sollte der Fortschritt zurückgemeldet werden? bis 75? %Wollstoff? 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) Problem mit Zeitüberschreitung beim Laden des Bildes

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 verkürzt wird unkontrolliert verlängert, was dazu führt, dass der Benutzer die Erfahrung beeinträchtigt, was die ursprüngliche Absicht des Laders zunichte macht. 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:

(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 <p> Verwendung (entsprechend test.html im Code): </p><p class="cnblogs_code" style="border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; border-bottom: #cccccc 1px solid; padding-bottom: 5px; padding-top: 5px; padding-left: 5px; border-left: #cccccc 1px solid; padding-right: 5px; background-color: #f5f5f5"><br> </p> <pre class="brush:php;toolbar:false"><script></script>
<script>
    imgLoader([&#39;../img/page1.jpg&#39;, &#39;../img/page2.jpg&#39;, &#39;../img/page3.jpg&#39;], function(percentage){
        console.log(percentage)
    });</script>

Laufergebnisse:

2. Demobeschreibung

Der am Anfang dieses Artikels angegebene Effekt, die entsprechende Seite ist index.html, ungefähr Es gibt zwei Probleme, die zu diesem Effekt erklärt werden müssen:

1) Es verwendet die in diesem vorherigen Blog eingeführte Schiebebildschirmidee unter Verwendung des Karussellprinzips in Kombination mit hammer.js, um a zu implementieren Einfache Schiebebildschirmfunktion, die einige davon kombiniert. Die Logik ist in swipe.js gepackt, das eine globale Variable bereitstellt. Swipe nach außen Dieses Modul verfügt über eine Init-Methode, damit die externen Funktionen die mit dem Schiebebildschirm verbundenen Funktionen durch Aufrufen initialisieren können Swipe.init() wurde ursprünglich nicht bereitgestellt. Die Sliding-Screen-Funktion wird nach dem Laden von js initialisiert. Mit dieser Init-Methode kann der Ladevorgang verzögert werden. index.html verweist auf insgesamt 5 js:

<script></script><script></script><script></script><script></script><script></script>

其中imgLoader.js就是前面介绍图片加载器的实现，前三个js都是为最后一个swipe.js服务的，感兴趣的可以继续我的博客利用轮播原理结合hammer.js实现简洁的滑屏功能了解相关内容。不过滑屏不是本文的重点，不了解swipe.js不会影响理解本文的内容~

2）虽然我在Verwenden Sie Komponenten zum Vorladen von Bildern, um die Benutzererfahrung mobiler HTML5-Seiten zu verbessern中用到了3张比较大的图片，但是由于在本地环境，加载速度还是非常快，所以一开始的时候，很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟，这才可以看到前面gif图片一开始的那个loading效果，实现方式是：

//模拟加载慢的效果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]();
    }
});

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

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();
    }
});

另外运行Verwenden Sie Komponenten zum Vorladen von Bildern, um die Benutzererfahrung mobiler HTML5-Seiten zu verbessern，需要用到grunt启动静态服务，如果已经安装好grunt-cli，则直接运行grunt connect任务即可打开Verwenden Sie Komponenten zum Vorladen von Bildern, um die Benutzererfahrung mobiler HTML5-Seiten zu verbessern的index.html。

3. 注意事项

预加载是一种比较常见的实现效果，但是在使用的时候，有些问题需要注意：

1）什么时候用

页面大的时候用，一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候，可以考虑使用。

2）尽量使用sprite图片

3）加载效果实现的时候，尽量不用图片，即使要用也应该用很小的图片，否则加载效果卡在那就没有意义了。

4. 总结

本文主要介绍了一个简单的图片预加载器，可应用于h5移动页面的开发当中，在它的思路之下，如果有必要的话，还可以对它进行一些改造，用它来加载其它类型的资源，比如音频或者视频文件，毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的，还有一种图片懒加载的技术，现在网上已经有比较好用的jquery插件了，不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究再写博客来介绍，敬请关注！

Das obige ist der detaillierte Inhalt vonVerwenden Sie Komponenten zum Vorladen von Bildern, um die Benutzererfahrung mobiler HTML5-Seiten zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!