插入部分加載後運行javascript

Question

ajax請求後，我插入一個部分到頁面中。

現在我要等到所有的圖像加載，然後淡出他們。

$(document).ready不起作用，因爲該文件已經準備好了。我如何設置？

Answer 1

似乎類似於這樣的問題：

• Official way to ask jQuery wait for all images to load before executing something
• Javascript wait for image to load before calling Ajax

的sugg estion是使用插件的幫助：

• http://plugins.jquery.com/project/BatchImagesLoad
• https://github.com/alexanderdickson/waitForImages

Answer 2

您是否提前知道圖片？如果是這樣，你可以這樣做：

(function(){ 
    var preLoadImg = new Image(); 
    preLoadImg.src = "/images/button.png"; 

    var preLoadImgLoading = new Image(); 
    preLoadImgLoading.src = "/images/loading.gif"; 
})(); 

或者......

$('#img1').load(function(){ 
    // fadeIn 
}); 

Answer 3

您可以預先載入圖像，並調用一個函數一旦它完全通過執行以下操作加載：

var img = new Image(); 
img.addEventListener('load', myCallBackFunction, false); 
img.src = 'my/img/src/'; 

在這種情況下，圖像完全加載後，myCallBackFunction將被調用。所以如果你有多個圖像，你可以使用一個計數器來跟蹤它們是否全部加載完畢。例如：

imgReadyCounter = 0; 

imgReadyCallBack = function(){ 
    imgReadyCounter++; 
    if(imgReadyCounter === numOfImages){ //numOfImages would be however images you are loading 
     //fadeIn your content 
    } 
} 

//then do the following for each image 
var img = new Image(); 
img.addEventListener('load', imgReadyCallBack, false); 
img.src = 'my/img/src/'; 

關於這種方法的好處是，即使用戶已經在他的瀏覽器的緩存圖像，回調函數依然會被調用。許多其他技術將導致回調不被稱爲緩存圖像。

Answer 4

您可以使用預加載插件，它預裝的圖像，然後告訴他們，一旦他們滿載

該頁面顯示與jQuery加載圖像。

• http://codesnippets.joyent.com/