Img图片预加载

最新推荐文章于 2025-06-28 10:55:11 发布

原创

最新推荐文章于 2025-06-28 10:55:11 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Img标签预加载 #JS图片预加载 #img 预加载 #Jquery img图片预加载

本文介绍了三种图片预加载的方法，包括直接使用img标签、常见但有限制的第一种和第二种方式，以及一种适用于本地和网络图片的高效预加载方法。通过这些方法，可以确保无论图片来源如何，都能正确获取图片属性，提升页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照惯例，img图片预加载平时我们都会使用
第一种方法：
直接使用

var img = new Image(); //创建一个Image对象，实现图片的预下载
img.onload =function(){
     .........
}
img.url = '图片路径'；

if(img.complete){ // 如果图片已经存在于浏览器缓存，直接调用回调函数
   img.onload()；
}

这种写法在如果是本地图片是有效的，网络图片则无法正确获取到<img>的属性

第二种方法：
也是网上不常说的方法

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

调用：
loadImage('图片路径'，function（e）{
     alert(e.width+"===========>"+e.height)
})

这种写法结果同上：如果是本地图片是有效的，网络图片则无法正确获取到<img>的属性

接下来，就要开始放大招了，不管是本地图片还是网络图片，均能准确的获取到<img>的正确属性。
第三种方法：