Предварительная загрузка jQuery не работает впервые в FireFox

Question

Я только что закончил сборку простой галереи jQuery с некоторыми затухающими переходами, как видно here. Все работает отлично во всех браузерах - за исключением того, что «предварительная загрузка изображения» не работает при первом загрузке в FireFox (работает во всех других браузерах). Изображения остаются в 0% непрозрачности в firefox. Не знаю, почему.

Вот код предварительной загрузки.

$(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

У меня есть вопрос о вашем «firstload исправить 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"); 
     }; 
    }); 
}); 

1. Я положил его после установки на FlexSlider. Это правильно/хорошо?
2. Я не понимаю, как это работает. Вы объясните, что если изображение выходит из кеша браузера, событие загрузки не срабатывает. Но тогда я понял, что если или почему «$ (« img »). Load (function()» запускается. Я имею в виду, что когда событие не запускается, потому что изображение появилось из кеша, мы не можем перехватить 'img' .load, потому что я не уволю других слова:.. Пожалуйста, объясните, что происходит, когда изображение получается из кэша, что в «зоне» коды или событий не удается UPDATE

: www.ozeankreuzer.de она до сих пор не удается при первой загрузке каждый день что случилось ошибка:.? document.body неопределен: https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png