Question

我试图等待完成加载的图像，但似乎加载事件永远不会匹配。

这是我的代码：

$(function() {
var arrowWidth = 22;
var currentImageID = -1;
var imageOffsets = new Array();
var loadedImages = 0;
var numberOfImages = $("div#sliderGallery > ul > li").size();

$("div#sliderGallery > ul").hide();
$("div#sliderGallery").append("<div id=\"loading\"></div>");
$("div#sliderGallery > div#loading").append("Chargement en cours ...<br>");
$("div#sliderGallery > div#loading").append("<img src=\"progressbar.gif\" />");

function setOffset(imageID) {
    if (imageID != currentImageID) {
        $("ul#slide_items > li > img#"+currentImageID).fadeTo(0, 0.2); 
        currentImageID = imageID;
        $("ul#slide_items > li > img#"+currentImageID).fadeTo("slow", 1);
        $("div#sliderGallery > ul").css("left", imageOffsets[imageID][0]+"px");
        $("div#slideGallery > span.arrow").css("width", imageOffsets[imageID][1]+"px"); 
        $("div#sliderGallery > span#left").css("left", imageOffsets[imageID][2]+"px");
        $("div#sliderGallery > span#right").css("left", imageOffsets[imageID][3]+"px");
    }
}


$("div#sliderGallery > ul > li > img").load(function() {
    alert("never executed ...");

    loadedImages++;
    if (loadedImages == numberOfImages) {
        $("div#sliderGallery > div#loading").remove();
        $("div#sliderGallery").css("overflow", "hidden");
        $("div#sliderGallery > ul").show();
        $("div#sliderGallery").append("<span id=\"left\" class=\"arrow\"><img src=\"arrow_left.png\" /></span>");
        $("div#sliderGallery").append("<span id=\"right\" class=\"arrow\"><img src=\"arrow_right.png\" /></span>");
        $("div#slideGallery > span.arrow").fadeTo(0, 0.5);
        $("div#slideGallery > span.arrow").css("padding-top", Math.round((600-146)/2)+"px"); 

        var ulWidth = $("div#sliderGallery").innerWidth();

        var imageID = 0;
        var imageWidthSum = 0;
        $("div#sliderGallery > ul > li > img").each(function() {
            image = jQuery(this);
            image.attr("id", imageID);
            image.fadeTo(0, 0.2);

            imageOffsets[imageID] = new Array();
            // Offset applied to images 
            imageOffsets[imageID][0] = Math.round(ulWidth/2-(imageWidthSum+image.innerWidth()/2));
            // Width applied to span
            imageOffsets[imageID][1] = Math.round(image.innerWidth()/2+arrowWidth);
            // Offset apply to the left span
            imageOffsets[imageID][2] = Math.round($("div#sliderGallery").offset().left+ulWidth/2-imageOffsets[imageID][1]);
            // Offset apply to the right span
            imageOffsets[imageID][3] = imageOffsets[imageID][1]+imageOffsets[imageID][2];

            imageID++;
            imageWidthSum += image.innerWidth();
        });

        setOffset(0);
    }
});

}）;

和HTML代码： link text

为什么这一行“警告（”从未执行......“）;”没有执行？

在此先感谢，我对这个问题感到疯狂：）

Answer 1

我写了一个插件，当后代图像下载完成后会触发回调。排序为已本地化的window.onload。

它被称为waitForImages，用法是......

$('selector').waitForImages(function() {

    alert('All images are loaded.');

});

Readme

它还可以配置为等待 CSS中引用的图像。

Answer 2

使用IE，图像上的事件onload似乎有问题。除了附加onload事件处理程序之外，您还可以尝试检查属性complete是否等于true。

$("div#sliderGallery > ul > li > img").each( function() { 
    if ($(this)[0].complete) {
        // track image is loaded
    }
});

这也适用于缓存图像。

Answer 3

这可能不是您问题的答案，但我注意到您引用了div＃slideGallery和div＃sliderGallery。这两个单独的div还是一个错字？

我收到了IE 8的警告框

Answer 4

来自docs：

注意：加载仅在您设置时才有效它在元素完全之前加载，如果你在那之后设置它什么都不会发生。事实并非如此发生在$（document）.ready（）中 jQuery处理它按预期工作，在DOM之后设置它时也是如此加载。

你能把它放在$（文件）.ready（）吗？

Answer 5

您需要通过将numberOfImages与$（“div＃sliderGallery＆gt; ul＆gt; li＆gt; img”）进行比较来检查是否所有图像都已加载（在快速连接上发生或从缓存中加载）。注册了onload处理程序。大多数浏览器只有在处理程序注册后图像已完成加载时才会触发事件，有些浏览器即使已经完成加载也会触发，但我不会依赖它。由于您通常在$（document）.ready（）上进行此类初始化，因此您更频繁地陷入该问题，因为它们之前可能已经加载了大量图像。

出于并发原因，你可以添加一些布尔标志，当你触发块（更好地使它成为一个函数）时，如果预加载已经完成，或者你可能最终多次执行该块，那么要切换和检查一些布尔标志。

另外请确保您不使用内部loadedImages计数器，因为由于上述原因，它可能永远不会计入全部值。最好每次检查$（“div＃sliderGallery＆gt; ul＆gt; li＆gt; img”）。长度。

我不知道它是否相关，但是当我编写了一个预加载器时，我使用jQuery的$（）注册了。每个函数直接为每个图像使用.onload。也许当时有一些问题，或者我只是不知道$（）。加载。如果它有任何区别，你可能想尝试。

等待用JQuery加载图像

5 个答案: