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竞争条件（当然，目前 没有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");

几点说明：

回调没有得到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
});

JQuery - 检查图像何时加载？

4 个答案: