利用简洁的图片预加载组件提升h5移动页面的用户
分类:计算机知识

应用简洁的图样预加载组件升高h5移动页面包车型客车客户体验

2016/03/12 · HTML5 · 1 评论 · 预加载

原来的书文出处: 流云诸葛   

在做h5运动页面,相信大家自然蒙受过页面已经开垦,然则中间的图纸还未加载出来的场馆,这种难点即便不影响页面包车型地铁成效,不过不实惠客户体验。抛开网速的缘故,化解这些难点有多地点的思路:最焦点的,要从http诉求合併,缓存管理,图片压缩等方面做品质优化;别的就是足以对页面里用到的具有图片做预加载的拍卖,当顾客展开页面包车型大巴时候比不上时彰显第一屏,而是先出示财富加载效果,等到加载完结,再来展现页面包车型的士主内容,那样就能够一下子就解决了那几个标题。即使这种加载效果占用了顾客的浏览时间,可是大家得以把它做的狼狈有趣一点,所以也不会耳熟能详客商体验。本文实践了这种主见,提供一个那三个轻松的图纸预加载组件,达成轻便,成效不弱,在做活动页面包车型大巴时候理应对你有参照他事他说加以考察价值。

效果(代码下载):

威尼斯手机娱乐官网 1

1. 兑现思路

html里面包车型客车img标签和css中background-imag等都会接触浏览器去加载相关的图片,可是借使那么些图片已经加载过了的话,浏览器就能够间接使用那张已经加载好的图样,进而能够眨眼间间在页面中渲染出来。通过javascript,创立Image对象,然后把那几个指标的src属性设置成要加载的图形地址也能接触浏览器加载图片,利用这点就能够兑现图片预加载的效果:在页面里首先把那贰个使用了有关的图纸的要素给藏掉,然后用js去加载图片,等到全部图片加载实现再把藏掉的因素展现就可以。然则那唯有是贰个主导的贯彻思路,要产生三个功能较健康的预加载组件,还会有以下八个难题:

1)进程难题

鉴于预加载的还要,还得做四个预加载的功效,那就供给把加载的进度实时通报到表面上下文才行。关于进程有多个实现格局,第一是已加载的数目大小/总的数据大小,第二是已加载的文件数/总的文件数,在浏览器里面,采取第一种形式是不具体的,根本没有原生的不二等秘书诀可以达成,所以不得不选取第二种。

2)图片加载战败的主题素材

譬喻有4张图纸,已经加载了四分之二,在加载第三张的时候出错了,该不应该将进度反馈成三成吗?答案是:应该。要是不这么管理的话,进度恒久无法到百分之百,页面主内容就没机缘展现了,即便图片加载有退步的状态,但是跟加载器未有关系,也许图片本人就不设有呢?也便是说图片加载战败不该影响加载器的功能。

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 total)); }; if (!total) { return callback & callback(1); } for (var i = 0; i ) { imgages[i] = new Image(); imgages[i].onload = imgages[i].onerror = _on; imgages[i].src = imgList[i]; } /** * 如果timeout * total时间限定内,仍有图表未加载出来(判定标准是loaded */ setTimeout(function () { loaded total)); }, timeout * total); }; "function" === typeof define & define.cmd ? define(function () { return loader }) : window.imgLoader = loader; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(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));
            };
 
        if (!total) {
            return callback & callback(1);
        }
 
        for (var i = 0; i ) {
            imgages[i] = new Image();
            imgages[i].onload = imgages[i].onerror = _on;
            imgages[i].src = imgList[i];
        }
 
        /**
         * 如果timeout * total时间范围内,仍有图片未加载出来(判断条件是loaded */
        setTimeout(function () {
            loaded  total));
        }, timeout * total);
 
    };
 
    "function" === typeof define & define.cmd ? define(function () {
        return loader
    }) : window.imgLoader = loader;
})();

利用格局(对应代码中的test.html):

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

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

运转结果:

威尼斯手机娱乐官网 2

2. demo说明

正文开篇给出的机能,对应的页面是index.html,关于这几个效应还会有五个问题须求证实:

威尼斯手机娱乐官网 ,1)它用了前头那篇博客动用轮播原理结合hammer.js完毕简洁的滑屏功效介绍的滑屏思路,并把它的片段逻辑包装在了swipe.js,对外提供了八个全局变量Swipe,那么些模块有二个init的格局,以便外界通过调用Swipe.init()就能够开端化滑屏相关的机能,原来未有提供那么些init方法,在js加载完成就能够开首化滑屏成效,有了那几个init方法就足以把滑屏的逻辑延迟到加载完结的时候去开首化。index.html一共引用了5个js:

<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>

1
2
3
4
5
<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效果,完毕形式是:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//模拟加载慢的效果
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(); } });

1
2
3
4
5
6
7
8
9
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插件了,可是如故很值的去深入明白下它的笔触跟完结中央,等自家有时间去研讨钻探再写博客来介绍,敬请关切!

正文代下载

2 赞 11 收藏 1 评论

威尼斯手机娱乐官网 3

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:利用简洁的图片预加载组件提升h5移动页面的用户

上一篇:2px引发的血案 下一篇:没有了
猜你喜欢
热门排行
精彩图文