Geek Answers Handbook

JQuery image preload not working for the first time in FireFox

I just finished creating a simple jQuery gallery with some fade transitions, as shown here here . Everything works fine in all browsers - except that "image pre-loading" does not work the first time it is loaded into FireFox (it works in all other browsers). Images remain at 0% opacity in firefox. I do not know why.

Here is the preload code.

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

Thanks in advance for your help.

+5
source share
2 answers

As a curiosity, try:

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

" Firefox". , firefox jquery flexslider.

$(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, . : , , , . "area" ?

UPDATE: www.ozeankreuzer.de - . ? : document.body - undefined: https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png

+1

More articles:


All Articles