jQuery 判断图片是否加载完成方法汇总
为什么要判断图片是否加载完成
在网页中，我们经常会用到图片，对于图片的加载，我们也需要及时获取到，才能进行一些后续操作，比如图片的轮播、图片的放大缩小等操作。但在实际中图片的加载是一个异步的过程，我们并不能很好地控制它的加载速度，所以就需要判断图片是否已经加载完成，才能进行后续的操作。
方式一：使用load事件
$('img').on('load', function() {
console.log('图片已经加载完成');
});
此方法的原理是，当图片加载完成后，会触发img元素的load事件，当load事件被触发时，就表明图片已经加载完成。
示例：
<body>
<img src="https://cdn.pixabay.com/photo/2022/06/18/14/35/time-7364645_1280.jpg" alt="">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('img').on('load', function () {
console.log('图片已经加载完成')
})
</script>
</body>
方式二：使用complete方法
$('img').each(function () {
if (this.complete) {
console.log('图片已经加载完成');
} else {
$(this).on('load', function () {
console.log('图片已经加载完成');
});
}
});
此方法的原理是，当图片有缓存的时候（一般情况下，浏览器会缓存之前加载过的图片），就会直接使用缓存的图片，此时图片已经加载完成，而当图片没有缓存的时候，需要等待图片加载完成后才能显示，此时就需要使用load事件来判断图片是否加载完成。
示例：
<body>
<img src="https://cdn.pixabay.com/photo/2022/06/18/14/35/time-7364645_1280.jpg" alt="">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('img').each(function () {
if (this.complete) {
console.log('图片已经加载完成')
} else {
$(this).on('load', function () {
console.log('图片已经加载完成');
});
}
})
</script>
</body>
总结
以上两种方式都可以用来判断图片是否加载完成，但是使用load事件的方式需要等到图片完全加载完成之后才会触发，而使用complete方法大部分情况下可以直接使用缓存图片，不需要等待完全加载完成，所以两个方法都各有优缺点，需要根据具体的使用场景来选择。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 判断图片是否加载完成方法汇总 - Python技术站
微信扫一扫 
支付宝扫一扫 