[前端] 图片预加载及获取属性

 

1、图片预加载

 

function preloadImg(srcArr) {
    if(srcArr instanceof Array) {
        for(var i=0; i<srcArr.length; i++) {
            var img = new Image();
            img.src = srcArr[i];
        }
    }
}
preloadImg(['image/img-people.jpg']);

 

 

2、获取预加载图片的属性

 

function getPreloadImgAttr(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.src = url;
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }
    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img); // 将回调函数的this替换为Image对象
    };
}
getPreloadImgAttr("image/demo.jpg", function() {
    console.log(this.width, this.height);
});

 

 

 

欢迎关注技术开发分享录：http://fenxianglu.cn/