jquery判断图片是否加载完成的方式

在jQuery中，有几种方法可以判断图片是否加载完成。这些方法主要依赖于jQuery的事件处理机制，特别是load事件。然而，对于动态加载的图片（比如通过Ajax请求后添加到DOM中的图片），直接使用load事件可能会遇到问题，因为对于已经在缓存中的图片，load事件可能不会触发。以下是一些常用的方法来处理这种情况：

1. 使用load事件（适用于静态图片）

对于已经存在于页面中的图片（不是通过Ajax或JavaScript动态添加的），你可以直接为它们绑定load事件来检测是否加载完成。

$('img').on('load', function() {  
    console.log('图片加载完成');  
});

2. 动态添加图片并检测加载

对于动态添加的图片，你可以使用complete属性来检查图片是否已加载。complete属性是一个布尔值，表示图片的加载状态。

var img = new Image();  
img.onload = function() {  
    console.log('图片加载完成');  
    // 可以将img添加到DOM中  
    $('#container').append(img);  
};  
img.onerror = function() {  
    console.log('图片加载失败');  
};  
img.src = 'path/to/your/image.jpg'; // 设置为你的图片地址  
  
// 如果你不确定图片是否已经在缓存中，可以这样处理：  
// 首先设置src为空字符串（或者是一个完全不同的地址），然后再设置为真实的图片地址  
img.src = '';  
img.src = 'path/to/your/image.jpg';

3. 检查complete属性（适用于所有情况）

无论图片是静态的还是动态添加的，你都可以检查其complete属性来确定是否已加载。

function checkImageLoaded(imgSrc, callback) {  
    var img = new Image();  
    img.onload = function() {  
        callback(true);  
    };  
    img.onerror = function() {  
        callback(false);  
    };  
    img.src = imgSrc;  
  
    // 如果图片已经在缓存中，onload可能不会被触发  
    // 因此，我们还需要检查complete属性  
    if (img.complete) {  
        callback(true);  
    }  
}  
  
checkImageLoaded('path/to/your/image.jpg', function(isLoaded) {  
    if (isLoaded) {  
        console.log('图片加载完成');  
    } else {  
        console.log('图片加载失败');  
    }  
});