首頁 > web前端 > H5教程 > 主體

利用圖片預先載入元件提升html5行動頁面的使用者體驗

PHPz
發布: 2017-04-03 14:51:40
原創
2084 人瀏覽過

在做h5行動頁面,相信大家一定碰到過頁面已經打開,但裡面的圖片還未載入出來的狀況,這種問題雖然不影響頁面的功能,但是不利於使用者體驗。拋開網速的原因,解決這個問題有多方面的思路:最基本的,要從http請求合併,緩存管理,圖片壓縮等方面做性能優化;另外就是可以對頁面裡用到的所有圖片做預載入的處理,當使用者開啟頁面的時候不立即顯示第一屏,而是先顯示資源載入效果,等到載入完畢,再來顯示頁面的主內容,這樣就能解決那個問題。雖然這種載入效果佔據了使用者的瀏覽時間,但是我們可以把它做的好看有趣一點,所以也不會影響使用者體驗。本文實踐了這種想法,提供一個非常簡潔的圖片預加載組件,實現簡單,功能不弱,在做移動頁面的時候應該對你有參考價值。

效果(利用圖片預先載入元件提升html5行動頁面的使用者體驗img_loader.rar):

利用圖片預先載入元件提升html5行動頁面的使用者體驗

1. 實作想法

html裡面的img標籤和css中background-imag等都會觸發瀏覽器去加載相關的圖片,但是如果這個圖片已經加載過了的話,瀏覽器就會直接使用這張已經加載好的圖片,從而能夠瞬間在頁面中渲染出來。透過javascript,創建Image對象,然後把這些對象的src屬性設置成要加載的圖片地址也能觸發瀏覽器加載圖片,利用這一點就能實現圖片預加載的功能:在頁面里首先把那些用到了相關的圖片的元素給藏掉,然後用js去載入圖片,等到所有圖片載入完畢再把藏掉的元素顯示即可。不過這只是一個基本的實作思路,要完成一個功能較健壯的預載元件,還有以下三個問題:

1)進度問題

由於預先載入的同時,還得做一個預先載入的效果,這就需要把載入的進度即時通知到外部上下文才行。關於進度有兩個實作方式,第一是已載入的資料大小/總的資料大小,第二是已載入的檔案數/總的檔案數,在瀏覽器裡面,採用第一種方式是不切實際的,根本沒有原生的辦法可以做到,所以只能採用第二種。

2)圖片載入失敗的問題

比如說有4張圖片,已經載入了50%,在載入第三張的時候出錯了,該不該將進度回饋成75 %呢?答案是:應該。如果不這麼處理的話,進度永遠無法到100%,頁面主內容就沒機會顯示了,雖然圖片加載有失敗的情況,但是跟加載器沒有關係,也許圖片本身就不存在呢?也就是說圖片載入失敗不應該影響載入器的功能。

3)圖片載入超時的問題

圖片無法載入太久,否則使用者一直停留在載入效果上看不到主內容,使用者的等待時間無法控制地延長,導致用戶體驗下降,這樣就有悖加載器的初衷了。所以應該給每個圖片設定一個加載的超時時間,如果在所有圖片的超時時間之後,還沒加載完,就應該主動放棄加載,通知外部上下文加載完畢,顯示主內容。

綜合以上這些需求,本文提供的實作是:

(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>使用方式(對應程式碼中的test.html):</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>
登入後複製

運行結果:

利用圖片預先載入元件提升html5行動頁面的使用者體驗

2. 利用圖片預先載入元件提升html5行動頁面的使用者體驗說明

本文開頭給出的效果,對應的頁面是index.html,關於這個效果還有兩個問題需要說明:

1)它用了之前這篇博客利用輪播原理結合hammer.js實現簡潔的滑屏功能介紹的滑屏思路,並把它的一些邏輯包裝在了swipe.js,對外提供了一個全域變數Swipe,這個模組有一個init的方法,以便外部透過呼叫Swipe.init()就能初始化滑動畫面相關的功能,原來沒有提供這個init方法,在js載入完畢就會初始化滑屏功能,有了這個init方法就可以把滑屏的邏輯延遲到載入完畢的時候去初始化。 index.html一共引用了5個js:

<script></script><script></script><script></script><script></script><script></script>
登入後複製

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

2)虽然我在利用圖片預先載入元件提升html5行動頁面的使用者體驗中用到了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();
    }
});
登入後複製

另外运行利用圖片預先載入元件提升html5行動頁面的使用者體驗,需要用到grunt启动静态服务,如果已经安装好grunt-cli,则直接运行grunt connect任务即可打开利用圖片預先載入元件提升html5行動頁面的使用者體驗的index.html。

3. 注意事项

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

1)什么时候用

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

2)尽量使用sprite图片

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

4. 总结

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

以上是利用圖片預先載入元件提升html5行動頁面的使用者體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!