刪除圖像加載時的背景圖像

Question

我正在通過AJAX加載圖像標簽，並將它們與jQuery中的傳統.html(content)函數一起插入，並與其他一堆HTML一起插入。 但是，如果您從頭開始加載頁面，這個問題仍然適用。 現在，我有一個背景圖像占位符，在圖像加載時放在那里。 我希望這個背景圖像在圖像加載時消失。

問題：

如果我附加一個傳統的.load(function)事件監聽器，我擔心在應用鈎子之前圖像可能會加載（將鈎子放在圖像后面的小JS <script> ，而不是在$(function(){})塊可能有點幫助）。 我還沒有遇到過這樣的行為，但我在規范中什么也沒知道阻止這種情況發生（因為在應用鈎子之前應該完全解析圖像標簽）。

我目前的解決方案 將命令放在圖像標記內的inline onload=屬性中。

有沒有更好的辦法？

Answer 1

直到一個星期前，我也會迷路。 值得慶幸的是， 這個問題的答案將幫助你：

基本上把它放在$() ：

$(function(){ 
   var img = $("#idofimage").load(function () { 
      /* your magic to swap out placeholder */ 
   });

   if (img[0].complete) {
     // Trigger the load handler if the image
     // is already loaded
     img.trigger('load');
   }

});

Answer 2

你不需要jQuery，你可以用CSS做。

.my-img-loader-class { background:url('placeholder-or-progress'); }

或者，如果您不想更改HTML：

#container img { background:url('placeholder-or-progress'); }

在圖像加載到特定div時顯示占位符。

它的工作方式是image元素將占位符圖像顯示為其背景，當src加載時，它將顯示在占位符上方，以便更好地替換它。