如何檢查是否所有的圖像使用jQuery下載？

我在我的應用程序中創建一個簡單的圖像動畫。文檔中有多個圖像。我希望當頁面加載圖像時應該開始動畫。我試着用這樣的：如何檢查是否所有的圖像使用jQuery下載？

$(document).ready(function(){ 

$(".slide").animate({ 
    left:'250px', 
    opacity:'0.3', 
    }); 

});

在我的本地服務器我得到的，因爲所有的圖像都即時加載了預期的效果，但是當我運行託管服務器相同的代碼我沒有得到預期的效果。首先按順序加載的圖像開始進行動畫製作，而其他動畫則在加載時進行動畫製作。

我想所有的圖像並行而不是串行地動畫。任何人都可以告訴我如何確保圖像加載，然後我可以動畫所有這些圖像？

來源

2014-06-14 user3739784

[圖像加載的JavaScript/jQuery的事件監聽器對於所有瀏覽器（可能重複http://stackoverflow.com/questions/7442821/javascript-jquery -event-listener-on-image-load-for-all-browsers） – Nano

簡單地改變$(document).ready()功能$(window).load功能：

$(window).load(function() { 

    $(".slide").animate({ 
     left:'250px', 
     opacity:'0.3', 
     }); 
});

背後這樣做的原因是，ready事件被觸發時，DOM元素準備，不論是否操縱內容中的內容（如圖像，視頻等）被下載或不在其中，當所有內容都已下載到DOM元素中時，將觸發load事件。

來源

2014-06-14 06:34:39 Hammad

非常感謝。那就是訣竅。 – user3739784

如果所有的圖像都在文件（無動態創建的）的HTML，那麼你可以簡單地切換使用$(window).load()將不火，直到頁面所有圖像都加載完畢：

$(window).load(function(){ 

$(".slide").animate({ 
    left:'250px', 
    opacity:'0.3', 
    }); 

});

來源

2014-06-14 06:34:27 jfriend00

確切地說，dom ready狀態意味着所有必需的東西都被加載並且頁面已準備好與之交互。圖像繼續在後臺加載。

你需要的是window.onload事件：

$(window).load(function() { 

$(".slide").animate({ 
    left:'250px', 
    opacity:'0.3', 
    }); 

});

來源

2014-06-14 06:35:18

如何檢查是否所有的圖像使用jQuery下載？

回答

相關問題