jquery 如何判断图片加载完成

最新AIGC资讯 2023年04月23日 11:05 58 im

　　在网页中，图片加载是一个非常常见的操作。然而，在某些情况下，我们需要判断图片是否已经加载完成，以保证网页的正常运行。而使用jQuery可以很方便地实现这个功能。

jquery 如何判断图片加载完成

判断单张图片是否加载完成

　　判断单张图片是否加载完成，我们可以使用jQuery的load()方法。该方法可以在指定的元素加载完成后执行一个回调函数。因此，我们可以将回调函数设置为图片加载完成后执行的操作。

　　具体代码如下：

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

　　上述代码中，我们使用了选择器$(img)选中了所有的图片元素，并使用load()方法添加了一个回调函数。当图片加载完成后，该回调函数就会被执行。

判断多张图片是否加载完成

　　如果需要判断多张图片是否加载完成，我们可以使用jQuery的Deferred对象。Deferred对象是jQuery中用于处理异步操作的对象，它可以让我们更方便地处理异步操作的结果。

　　具体代码如下：

var deferreds = [];　　$(img).each(function(){　　 var deferred = $.Deferred();　　 $(this).load(deferred.resolve);　　 deferreds.push(deferred);　　});　　$.when.apply($, deferreds).done(function(){　　 // 所有图片加载完成后执行的操作　　});

　　上述代码中，我们首先使用each()方法遍历所有的图片元素，并为每个元素创建一个Deferred对象。然后，我们使用load()方法将该元素加载完成时的回调函数设置为deferred.resolve，即当图片加载完成后，执行该Deferred对象的resolve()方法。最后，我们将所有的Deferred对象存储在数组deferreds中。

　　接着，我们使用$.when()方法来等待所有的Deferred对象都执行完毕。当所有的Deferred对象都执行完毕后，done()方法就会被执行，我们可以在其中添加所有图片加载完成后需要执行的操作。