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

Question

我刚刚完成了一个简单的 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'});
    });
});

预先感谢您的任何帮助。

Answer 1

出于好奇，请尝试：

$(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");
});

Answer 2

我对你的“firefox首次加载修复”有一些疑问。我使用稍微改变的代码来消除上述与 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");
        };
    });
});

1. 我把它放在 flexslider 设置之后。这是正确/好的吗？
2. 我不明白它是如何工作的。您解释说，如果图像来自浏览器缓存，则加载事件将不会触发。但后来我想知道“$('img').load(function()”是否或为什么被触发。我的意思是，当由于图像来自缓存而未触发事件时，我们无法挂钩“img” .load 因为我不会被解雇。
   换句话说：请解释当图像来自缓存时会发生什么。代码或事件“区域”中的哪些内容失败了？

更新：www.ozeankreuzer.de 每天第一次加载时仍然失败。怎么了？
错误是： document.body 未定义： https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png