JS判断图片是否加载完成方法汇总(最新版)

首先让我们了解一下为什么需要判断图片是否加载完成。

在网页开发中，如果想要实现一些需要图片支持的功能，如图片轮播、瀑布流布局、图片懒加载等，就需要在JS中判断图片是否加载完成。

那么如何判断图片是否加载完成呢？下面我将介绍一些常用的方式。

1. 使用Image对象的onload事件

var img = new Image();
img.onload = function(){
    // 图片加载完成后的操作
};
img.src = '图片地址';

上面代码中，我们新建了一个Image对象，然后给它设置一个src属性，浏览器就会开始加载图片。当图片加载完成后，就会触发onload事件。

需要注意的是，如果图片已经在缓存中加载过了，直接设置onload事件会失效，因此可以通过判断img对象的complete属性是否为true来判断图片是否已经加载完成。

var img = new Image();
img.onload = function(){
    // 图片加载完成后的操作
};
if (img.complete) {
    // 图片已经在缓存中加载完成
    img.onload();
}
img.src = '图片地址';

1. 使用jQuery

$('img').load(function(){
    // 图片加载完成后的操作
});

上面代码中，我们使用了jQuery库的load()方法，当所有的图片加载完成后，就会执行load()方法中的回调函数。需要注意的是，load()只能处理那些没有被缓存过的图片。

1. 利用CSS

img{
    display: none;
}
img[src^="图片地址"]{
    display: block;
}

上面代码中，我们先给图片设置一个display:none的样式，让图片不会被显示。当图片加载完成后，会出发img[src^="图片地址"]选择器，将图片的display属性设置为block，这时候图片就会显示出来。

需要注意的是，这种方式只能判断图片是否加载完成，并不能执行图片加载完成后的操作。

总结：

以上三种方式都可以用来判断图片是否加载完成，在实际开发中可以根据需要选择最适合的方式。需要注意的是，无论哪种方式，都需要考虑到图片缓存的情况。