div背景圖像呈現後的jQuery事件

我想知道是否有一種可能的方式使用jQuery在div背景圖像完成下載和呈現後立即觸發函數。

比方說，你有這個div

<div id="img1" class="img1"> </div>

其中IMG1風格

.img1 { 
    background-image: some_big_image.png; 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover; 
    display: none; 
}

concidering這個javascript函數

function showDiv() { 
    $("#img1").fadeIn(1000); 
}

有沒有辦法來調用以前的功能權限後圖像被渲染？通過呈現我的意思是調整大小，以適合其div內準備好顯示。

我發現很多有關在頁面加載後或下載圖像後觸發函數的信息，但沒有關於後期渲染。

你們是最好的。先謝謝你。

來源

2012-11-28 Érik Desjardins

HTTP：/ /stackoverflow.com/questions/910727/jquery-event-for-images-loaded – xyz

你的目標是什麼？似乎只要頁面加載就會消失。爲什麼要在圖像呈現後嘗試執行它？ – thefreeman

@davidcroda如果我這樣做，圖像下載但尚未渲染。圖像必須根據div的位置和大小調整大小和重新定位。淡入處在圖像呈現之前開始。 –

嘗試

var img = new Image(); 
img.src = "/some_big_image.png"; 
img.onload = function() { 
    $("#img1").css("background-image", "url('" + img.src + "')").fadeIn(1000); 
}

小提琴here

來源

2012-11-28 13:17:03 Bruno

試過這個。將無法正常工作，因爲即使下載圖像，它們仍未正確渲染，所以當調用fadeIn時，背景圖像尚未準備好顯示。 –

剛剛看到您的編輯。現在再試一次。 –

@ÉrikRykDesjardins還添加了一個小提琴:) – Bruno

我知道你已經接受了上述的答案，但是這可以簡化grealy只使用jQuery的神奇功能

$(function() { 
    $("#img1").fadeIn(1000); 
}

你在上面回答onload事件不適合你。 $（function（）{// code here}）;當dom完全準備就緒時發生（不確定是否所有瀏覽器默認爲onload事件都這樣做），所以也許這就是爲什麼你有問題。這也是方便，因爲你可以把它叫做多處您的網頁上，他們將被合併（而不是直接設置onload事件，將被重寫如果將其設置在其他地方）

小提琴這裏：http://jsfiddle.net/5cR4G/8/

來源

2012-11-28 13:17:07 thefreeman

不起作用。當DOM準備就緒時，你準備好了「準備就緒」，但是這樣做確實不會包含所有加載的圖像。在這種情況下，「負載」發生火災。也就是說，當DOM準備好擺弄時，「就緒」就會觸發。當所有的資源被加載時，「加載」都會觸發。 –

div背景圖像呈現後的jQuery事件

回答

相關問題