图片加载完成再执行事件

2018-06-24 00:48:37来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

//图片预加载
function load(imgSrc,callback) {  //imgSrc参数是页面中要预加载的图片的路径数组,如imgSrc=['img/xx.png','img/xxx.png'...],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(c == imgSrc.length){
                if(callback){
                    callback();
                }
            }
        }
    }
    return imgs;  //返回加载的图片列表,这个省略也没有问题
}

应用场景:一些图片较多的页面,一些需要加上进度条或者百分比读取等加载效果的页面,一般移动端页面用得比较多

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript中常见的10个BUG及其修复方法

下一篇:【Chrome控制台】获取元素上绑定的事件信息以及监控事件