JQuery - 检查图像何时加载？

Question

我在加载图像时遇到一些问题。

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

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

我的代码中没有错误。我的脚本中的其他所有内容都运行良好。

我的 HTML 看起来像这样。

<div id="photos">
    <img src="../sample1.jpg" style="background-color:#000033" width="1" height="1" alt="Frog!"/>
    <img src="../sample2.jpg" style="background-color:#999999" width="1" height="1" alt="Zooey!"/>
</div>

我是否使用了错误的 JQuery 函数？还应该注意的是，可见性设置为隐藏。然而，即使可见也没有警报。

有什么想法吗？

Answer 1

图像的 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!");
}

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

当然，如果您的选择器将匹配多个图像，您需要处理这个问题；您的选择器看起来应该只匹配一个，所以...

编辑这个版本允许多个图像，我认为它可以处理任何非 Javascript 竞争条件(当然，目前有 em> 没有 Javascript 竞争条件；Javascript 本身在浏览器中是单线程的 [除非您使用新的 web workers 东西]):

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");

一些注意事项:

• 回调未获取事件对象；如果您愿意，可以对其进行修改，但是当然，在图像已经加载的情况下不会有任何事件，因此它的实用性有限。
• 您可能可以使用 one 而不是 bind 和 unbind，但我喜欢这种清晰度，而且我很偏执。 :-)