javascript 图片预加载兼容Firefox； Chrome； Opera； Safari；

最新推荐文章于 2021-06-23 16:57:03 发布

原创最新推荐文章于 2021-06-23 16:57:03 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Safari #Opera #Chrome #Firefox #JavaScript #ViewUI

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个兼容多种浏览器的图片加载检测方法。通过利用Image对象的complete属性，在图片onload事件前进行判断，有效实现图片是否已加载完成的检查。此方法避免了不必要的onload事件处理。

经过一些分析，终于发现一个为各个浏览器所兼容的Image的属性——complete。所以，在图片onload事件之前先对这个值做一下判断即可。最后，代码变成如下的样子：

function loadImage(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对象
    };
};