Question

我有一种情况，我必须等待特定图像加载，然后换出它的src，或找到下一个图像并隐藏/显示它。

我需要做的是显示占位符图像（轮廓），直到其主图像准备好，然后隐藏轮廓并显示主图像。很常见的东西。

问题是这个jquery函数不会在新的选项卡或窗口上触发......但是如果我点击f5它会完美运行......但是我又打开了一个新选项卡，直到我点击f5它才会触发。

CSS:
.staffImage1, .staffImage2, .staffImage3, .staffImage4, .staffImage5 { display: none; }

Jquery:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5')
    .load(function () {
        $(this).next('.sillhouette').hide();
        $(this).show();
        console.log("function fired")
    })

我只在刷新后才收到日志消息。

需要注意的是我正在使用＆＃34; First 14k＆＃34;提高页面速度的方法，所以当第一次初始加载图像时，jquery可能还没准备好，但是在f5之后缓存并工作？

每个图像必须等到它完全加载，它们都在滑块中，所以我需要在准备好后立即显示第一张幻灯片图像，我不能等到所有5张图像都准备就绪，因为这会减慢第一张幻灯片的图像。

感谢您的任何建议，谢谢

Answer 1

这个结构：

$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').load(...)

加载完所有图像后，

无法通知您。 .load()一次只能处理一张图片。并且，如果图像被缓存，它们可能已经在jQuery甚至运行之前已经完成加载，因此您将完全错过加载事件。

最简单的解决方法是在所有页面资源加载完毕后使用窗口加载事件：

$(window).load(function() {
    // all images are loaded here
});

也可以监控这5张图片，但这是更多的工作。我之前已编写代码来执行此操作，因此我将查看是否可以找到先前的代码。

这是一个jQuery插件函数，可以监视特定的图像。当加载jQuery对象中的所有图像时，它将调用它的回调：

// call the callback when all images have been loaded
// if all images are already loaded or there were no images in the jQuery
// object, then the callback will be called immediately
jQuery.fn.imgsLoaded = function(fn) {
    var cntRemaining = 0;
    function checkDone() {
        if (cntRemaining === 0) {
            fn();
        }
    }

    function imgDone() {
        --cntRemaining;
        checkDone();
        // remove event handlers to kill closure when done
        $(this).off("load error abort", imgDone);
    }

    this.each(function() {
        if (!this.tagName.toLowerCase() === "img" && !this.complete && this.src) {
            ++cntRemaining;
            $(this).on("load error abort", imgDone);
        }
    });
    checkDone();
    return this;
}

您可以像这样使用它：

$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').imgsLoaded(function () {
    $(this).next('.sillhouette').hide();
    $(this).show();
    console.log("function fired")
});

工作演示：http://jsfiddle.net/jfriend00/zaoweyoo/

Answer 2

编写jquery代码＆＃39; $（文件）。就绪（函数（）{ //你的代码 }）;＆＃39;

Jquery函数在初始加载时不触发

2 个答案: