jQuery görüntü önyüklemesi FireFox

Question

'da ilk kez çalışmaz here göründüğü gibi bazı solma geçişleri ile basit bir jQuery galerisi oluşturmayı yeni bitirdim. Her şey tüm tarayıcılarda iyi çalışır - "görüntü ön yükleme" özelliği FireFox'taki ilk yükte çalışmaz (diğer tüm tarayıcılarda çalışır). Görüntüler, firefox'ta% 0 opaklıkta kalır. Emin değilim neden.

İşte önyükleme kodu.

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

Yardımlarınız için şimdiden teşekkür ederiz.

Answer 1

merakı meselesi olarak, deneyin:

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

çözüm daha sağlam hale getirmek için, tarayıcı tarafından önbelleğe alınmış olması halinde her bir görüntü için yangın yük olayı zorlayarak düşünmelisiniz, Bu, yükleme olayının tetiklenmesini engelleyebilir. Sen .complete özelliği için test ederek bunu yapabilirsiniz:

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

Ben senin "firefox ilkYukleme düzeltme" hakkında bazı soru var. Ben jquery flexslider ile bağlantılı olarak yukarıda açıklanan firefox hatası ortadan kaldırmak için biraz değiştirilmiş kod kullanın.

$(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. Ben flexslider kurduktan sonra koydu. Bu doğru mu, iyi mi?
2. Nasıl çalıştığını anlamadım. Tarayıcı önbelleğinden bir görüntü gelirse yük olayının patlamamasını açıklarsınız. Ama sonra neden "$ ('img'). Load (function") işten atılırsa yatarım. Yani, görüntü önbellekten geldiği için olay başlatılmadığı zaman, 'img' yapamayız. ben ateş olmayacak çünkü .Load Diğer kelimeler:..? bir görüntü önbellekten geldiğinde ne olacağını açıklayınız ne kod veya olay "alanında"

UPDATE başarısız: www.ozeankreuzer.de ?. hala yanlış olan her gün birinci yük başarısız hatadır: document.body tanımlanmamış:!. https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png