jQuery圖像預加載不能在FireFox中第一次工作

我剛剛完成了一個簡單的jQuery圖庫，其中有一些淡入淡出的過渡，如here。在所有瀏覽器中一切正常 - 除了「圖像預加載」不適用於FireFox的第一次加載（適用於所有其他瀏覽器）。 Firefox中的圖片保持在0％不透明度。不知道爲什麼。jQuery圖像預加載不能在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'}); 
    }); 
});

在此先感謝您的幫助。

來源

2010-12-10 mattelliottIT

由於好奇心的問題，請嘗試：

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

來源

2010-12-10 01:44:09 karim79

就像一個魅力我不知道你能像連鎖在jQuery的你會介意解釋。如何在最後的每個（函數（）調用加載函數結束了嗎？謝謝！ – mattelliottIT 2010-12-11 21:22:07

@mattelliottIT - 最後一個`.each`迭代每個圖像，檢查`.complete`屬性是否已設置 - 如果已設置，則手動觸發`.load`事件。一般情況下，當圖像爲`.complete`時，`.load`事件不會觸發，因此需要手動干預以檢查圖像是否已完成，並相應地觸發其加載事件。想象一下，其中一個圖像已被瀏覽器緩存，並立即從緩存中取出，而不會觸發onload事件。你的'.load`事件處理程序不會觸發，所以你的頁面不會像預期的那樣工作。:) – karim79 2010-12-13 17:32:47

我對你的「火狐firstload修復」一些問題。我使用稍微更改的代碼來消除上面描述的與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因爲我不會被解僱其他的話：請說明當圖像來自於緩存中會發生什麼代碼或事件「區域」是什麼失敗

UPDATE：www.ozeankreuzer.de它還是第一次加載每天失敗有什麼不對錯誤是：？document.body的未定義：https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png

來源

2012-06-13 22:29:31

jQuery圖像預加載不能在FireFox中第一次工作

回答

相關問題