JQuery – 检查图像何时加载？

我在加载图像时遇到了一些麻烦。

我被告知以下function可以工作，但它没有做任何事情。

$("#photos img:first").load(function (){ alert("Image loaded!"); }); 

我的代码中没有错误。 我脚本中的其他所有内容都很棒。

我的HTML看起来像这样。

我有错误的JQueryfunction吗？ 还应注意，可见性设置为隐藏。 然而，即使在可见时也没有警报。

有任何想法吗？

Answer 1

load时会触发图像的load事件（doh！），严重的是，如果在加载之前未挂接处理程序，则不会调用处理程序。 浏览器将并行加载资源，因此您无法确定（即使在jQuery ready事件中说该页面的DOM已准备就绪）代码运行时尚未加载图像。

您可以使用图像对象的complete属性来了解它是否已被加载，因此：

 var firstPhoto = $("#photos img:first"); if (firstPhoto[0].complete) { // Already loaded, call the handler directly handler(); } else { // Not loaded yet, register the handler firstPhoto.load(handler); } function handler() { alert("Image loaded!"); } 

甚至可能存在竞争条件，如果所讨论的浏览器确实实现了multithreading加载，其中图像加载可能发生在与Javascript线程不同的线程上。

当然，如果你的选择器匹配多个图像，你需要处理它; 你的选择器看起来应该只匹配一个，所以……

编辑此版本允许多个图像，我认为它处理任何非Javascript竞争条件（当然，目前没有Javascript竞争条件; Javascript本身是浏览器中的单线程[除非您使用新的Web工作人员的东西]）：

 function onImageReady(selector, handler) { var list; // If given a string, use it as a selector; else use what we're given list = typeof selector === 'string' ? $(selector) : selector; // Hook up each image individually list.each(function(index, element) { if (element.complete) { // Already loaded, fire the handler (asynchronously) setTimeout(function() { fireHandler.call(element); }, 0); // Won't really be 0, but close } else { // Hook up the handler $(element).bind('load', fireHandler); } }); function fireHandler(event) { // Unbind us if we were bound $(this).unbind('load', fireHandler); // Call the handler handler.call(this); } } // Usage: onImageReady("#photos img:first"); 

几个笔记：

• 回调没有得到event对象; 如果你喜欢的话，你可以修改它，但是当然，在图像已经加载的情况下没有事件，所以它的实用性有限。
• 你可以使用one而不是bind和unbind ，但我喜欢清晰度而且我是偏执狂。 🙂

Answer 2

使用ready而不是load事件。

Answer 3

试试这个：

  $("#images img:last").one("load",function(){ //do something } 

要么

  $("#images img:last").one("ready",function(){ //do something } 

Answer 4

 $("#images img:last").on('load',function(){ //do smth });