Question

我刚刚完成了一个简单的jQuery库，其中有一些渐变过渡，如here所示。在所有浏览器中一切正常 - 除了“图像预加载”在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 firstload fix”有疑问。我使用稍微更改的代码来消除与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' .load因为我不会被解雇。换句话说：请解释当图像来自缓存时会发生什么。代码或事件“区域”中的内容失败了吗？

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

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

2 个答案: