jQuery图像预加载首次在FireFox中不起作用

我刚刚完成了一个简单的jQuery库，其中包含一些渐变，如图所示。在所有浏览器中都可以正常工作——除了“图像预加载”在FireFox的第一次加载中不起作用（在所有其他浏览器中都可以）。firefox中的图像不透明度为0%。不知道为什么

这是预加载代码

$(document).ready(function(){
    //--------PRELOAD LOAD IMAGES--------\\
    $('img').load(function() {
        //once image has loaded fade in image
        $(this).animate({opacity : 1.0}, 1000);

        //kill padding on last thumbnail of each line
        $('#headshots img').eq(3).css({'padding-right' : '0'});
        $('#ports img').eq(3).css({'padding-right' : '0'});
        $('#ports img').eq(7).css({'padding-right' : '0'});
    });
});

---

提前感谢您的帮助。

出于好奇，请尝试：

$(this).each(function() {
    $(this).animate({opacity : 1.0}, 1000);
});

<> >为了使您的解决方案更加健壮，您应该考虑强制加载事件在每个图像被浏览器缓存的情况下触发，这样可以防止加载事件触发。您可以通过测试

.complete

属性来完成此操作：

$('img').load(function() {
    $(this).each(function() {
        $(this).animate({opacity : 1.0}, 1000);
    });
    $('#headshots img').eq(3).css({'padding-right' : '0'});
    $('#ports img').eq(3).css({'padding-right' : '0'});
    $('#ports img').eq(7).css({'padding-right' : '0'});
}).each(function() {
    if(this.complete) $(this).trigger("load");
});

---

我对您的“firefox firstload修复程序”有一些疑问。我使用稍加修改的代码来消除上述与jquery flexslider相关的firefox错误

$(window).load(function() { 
  $('.flexslider').flexslider({
        animation: "fade",              //String: Select your animation type, "fade" or "slide"
        slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
        slideshow: true,                //Boolean: Animate slider automatically
        slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
        animationDuration: 1500,         //Integer: Set the speed of animations, in milliseconds
        directionNav: false,            //Boolean: Create navigation for previous/next navigation? (true/false)
        controlNav: false,              //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        controlsContainer: ".flex-container"
  });
});

$(document).ready(function(){
    $('img').load(function() {
        $(this).each(function() {
            /*alert("each func");*/
            /*$(this).animate({opacity : 1.0}, 1000);*/
        });
    }).each(function() {
        if(this.complete) {
            //var src = $(this).attr("src");
            //alert(src);
            $(this).trigger("load");
        };
    });
});

我把它放在flexslider设置之后。这样正确/好吗

我不明白它是怎么工作的。您解释说，如果图像来自浏览器缓存，则不会触发加载事件。但是我想知道“$（'img'）.load（function（）”是否被触发或者为什么被触发。我的意思是，当事件因为映像来自缓存而没有被触发时，我们不能钩住'img'。加载，因为我不会被触发。 换句话说：请解释当图像来自缓存时会发生什么。代码或事件“区域”中的什么失败

更新：www.ozeankreuzer.de每天第一次加载时仍然失败。怎么了？

---

错误是：document.body未定义：

像一个符咒一样工作！我不知道您可以在jQuery中像这样链接。您介意解释一下最后一个（函数（）是如何链接的吗加载函数结束时的调用正在工作？谢谢！@mattelliottt-最后一个

。每个
迭代每个图像，检查
.complete
属性是否已设置-如果已设置，则手动触发
.load
事件。通常，当图像是
.complete
时，它是
.load
事件不触发，因此需要手动干预以检查图像是否已完成，并相应地触发其加载事件。假设其中一个图像已被浏览器缓存，并在不触发onload事件的情况下立即从缓存中提取。您的
.load
事件处理程序将不会触发，因此您将调用页面行为不符合预期。：）啊，明白了。感谢您花时间解释。我不熟悉flexslider，但我觉得它应该在doc.ready中。试试看。否则，代码中的某些地方会导致问题。