web网页图片预加载,并显示加载进度

2019-05-06  本文已影响0人  风筝啊

如果是图片多的H5,可以加一个loading动画,预加载需要用到的图片。

        //图片加载方法
        function load(imgSrc,callback) {
            var imgs = [];
            var c = 0;
            for (var i = 0; i < imgSrc.length; i++) {
                imgs[i] = new Image();
                imgs[i].src = imgSrc[i];
                imgs[i].onload = function(){
                    c++
                    if(callback){
                        callback(c,imgSrc);
                    }
                }
            }
            return imgs;
        }
        //需要操作这里的方法
        function imgStatus(n,imgSrc){
            //加载进度百分比 (加载数量 / 图片数量 * 100)
            var loadImgNum = parseInt(parseFloat(n / imgSrc.length).toFixed(2) * 100);
            //做加载动画处理
            console.log( loadImgNum );

            //如果加载完成执行
            if(n == imgSrc.length){
                console.log('ok');
            }
        }

        //图片列表(可以替换成网络图片,图片越多效果越明显)
        var imgList = [
            '5cc69f249ae6f.jpg',
            '5cc69f2394f4d.jpg',
            '5cc69f2284c11.jpg',
            '5cc69f21ae754.jpg',
            '5cc69f25a3474.jpg',
            '5cc69f26b71ec.jpg',
            '5cc69f27c78d2.jpg',
            。。。
        ];

        //调用
        load(imgList,imgStatus);
上一篇 下一篇

猜你喜欢

热点阅读