如何判斷CSS背景圖像何時加載？事件是否被解僱？

我有一個具有圖像背景的側邊欄小部件。如何判斷CSS背景圖像何時加載？事件是否被解僱？

這是一個搜索輸入表單。我不希望輸入在圖像加載之前顯示。

有沒有辦法附加一個load事件處理程序CSS背景圖像像正常的IMG元素/對象？

我知道這可能正常圖像上完成的，但我想保持它作爲一個CSS背景，因爲圖像是一個精靈的一部分。我使用jQuery，所以使用jQuery或普通DOM JS的解決方案同樣好。

2011-06-08 Cole

[背景圖片加載時觸發事件]的可能重複（http://stackoverflow.com/questions/3281651/trigger-event-on-background-image-load） – azerafati 2016-10-02 12:21:32

您可以加載使用DOM /隱藏圖像，並綁定到該load事件相同的圖像。瀏覽器的緩存應該注意不要加載圖像兩次，如果圖像已經加載，事件應該立即觸發...沒有測試，很難。

來源

2011-06-08 22:12:05

是的。這是一個好主意。就這樣做！ – 2015-12-08 12:55:50

這裏是如何做到這一點：http://stackoverflow.com/a/5058336/3062017 – 2016-01-08 23:08:26

在未來檢測是否在CSS中引用（圖片，字體資產更先進的，可預測的，並且可能更有效的方法... ）已經加載將使用[ServiceWorkers]（https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API）和[postMessage]（http://www.w3.org/TR/） service-workers /＃service-worker-postmessage）：服務工作者將加載資源，將其傳遞到頁面，併發布消息以表明資源已經加載，並且可以從JS內部採取行動，而不依賴於瀏覽器自己的緩存來避免額外的請求。 – 2016-01-10 01:35:16

不設置在CSS的背景，但圖像加載到與JavaScript（或更好，jquery的）創建的img標籤。一旦加載，它將觸發加載事件。當該事件被觸發時，樣式屬性應用到您的div

來源

2011-06-08 22:19:28

我一直在嘗試這種方法來解決IE8s缺乏「DOMContentLoaded」事件，這似乎是爲什麼.ready（）不能與<= IE8一起工作......但它似乎也不起作用。請參閱http://api.jquery.com/load-event/下關於.load（）的jquery文檔「使用圖像時加載事件的注意事項」 – mutex 2011-06-09 00:32:13

不要在css中設置背景？聽。我使用CSS背景圖像，所以我可以使用「封面」選項。這是不可能的圖像標籤，除非你使用一個庫，我不認爲有任何寫這個。 – MurWade 2017-11-03 22:54:59

在Chrome中使用。就緒（）的jQuery的似乎是爲我工作。這裏是我的小提琴：

http://jsfiddle.net/pWjBM/5/

的圖像僅僅是一個隨機我選擇的是相當大的 - 它實際上需要很長的時間，我的一些測試來加載，所以可能是值得的東西替換比較小。但最終的結果是你想要的我想：加載需要一段時間，一旦加載了警報，然後顯示文本框（#txt）。似乎也在Firefox中工作;不確定其他瀏覽器。

編輯：哈，看來在Chrome，Firefox和Safari工作。在IE8中不起作用。所以...它適用於所有真正的瀏覽器:)

EDIT2：經過多次擺弄，Allesandro和我自己的解決方案似乎工作的組合。我在隱藏的img上使用.ready（）來檢測圖像何時實際加載，然後將其加載到CSS背景中。

http://jsfiddle.net/pWjBM/41/

HTML：

<div id="testdiv"> 
    <input type="text" id="txt" style="display:none;" /> 
</div> 
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" />

的Javascript：

$(function() { 
    $('#dummy').ready(function() { 
     alert('loaded'); 
     $('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)'); 
     $('#txt').show(1000); 
    }); 
});

CSS：

#testdiv { 
    background:#aaaaaa none no-repeat right top; 
    width: 400px; 
    height: 400px; 
} 

#txt{ 
    margin-left: 180px; 
    margin-top: 140px; 
}

注：下面有關於這個工作不評論因爲你可以改變圖像的URL，它仍然會觸發加載的事件。實際上，它的工作原理與我期望得到的當前代碼非常相似 - 它不會檢查指向您的「圖像」的url是否有效並且確實是一個圖像，它所做的只是觸發一個事件當img準備就緒並更改背景時。代碼中的假設是你的url指向一個有效的圖像，並且我認爲在給定問題的情況下不需要進一步的錯誤檢查。

來源

2011-06-08 23:35:47 mutex

如何判斷CSS背景圖像何時加載？事件是否被解僱？

回答

相關問題