2

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

这是我的代码：

$(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 代码： 链接文本

为什么这一行“警报（“从未执行过......”）；“ 没有被执行？

在此先感谢，我要为这个问题发疯:)

4

5 回答 5

6

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

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

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

    alert('All images are loaded.');

});

自述文件。

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

于 2011-05-05T13:42:13.923 回答
4

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

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

这也适用于缓存的图像。

于 2009-07-09T15:19:40.430 回答
0

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

我收到带有 IE 8 的警告框

于 2009-07-08T15:32:24.583 回答
0

从文档：

注意：只有在元素完全加载之前设置它才会起作用，如果你在之后设置它什么都不会发生。这不会发生在 $(document).ready() 中，jQuery 会处理它以按预期工作，在 DOM 加载后设置它时也是如此。

你能把它放在 $(document).ready() 中吗？

于 2009-07-08T18:17:01.773 回答
0

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

出于并发原因，您还可以添加一些布尔标志以在您触发块时进行切换和检查（最好将其设为函数）以在预加载完成时执行，或者您可能最终多次执行该块。

还要确保您不使用内部的 loadedImages 计数器，因为由于上述原因，它可能永远不会计入完整值。最好每次检查 $("div#sliderGallery > ul > li > img").length。

我不知道它是否相关，但是当我编写一个预加载器时，我使用 .onload 直接为每个图像注册了 jQuery 的 $().each 函数。也许当时有一些问题，或者我只是不知道 $().load。如果有什么不同，您可能想尝试一下。

于 2009-07-08T18:49:34.470 回答