Bootstrap

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('图片加载失败');  
    }  
});

;