使用jquery使圖像淡入圖像加載

Question

我有一頁充滿圖像，我希望每個人加載時淡入。我有以下代碼，它的作品，但似乎越野車，基本上有時並不是所有的圖像淡入。

有沒有人有任何建議，如何改善這一點。

感謝

$('.contentwrap img').hide().load(function() { 
    $(this).fadeIn(1000); 
}); 

Answer 1

你打的的document.ready該功能？

$(document).ready(function() { 
     // put all your jQuery goodness in here. 
    }); 

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

有時並不是所有的圖像淡入

呀，這通常是一個相當基本的問題：一些圖像加載完成您指定它們的負載之前事件處理器。當圖像被緩存時，這尤其可能。

如果圖像是在HTML的唯一可靠的方法是，不幸的是，包括（極其醜陋）內嵌onload屬性：

<img src="..." alt="..." onload="$(this).fadeIn();"> 

Answer 3

你可以首先確保您的圖片默認情況下隱藏（不需要再爲你的jQuery hide電話）與一些CSS，

.contentwrap img { 
    display:none; 
} 

，然後在你的document.ready，你可以嘗試以下。我承認在這裏會有一些冗餘，因爲一些圖像可能會（在幕後）試圖淡化兩次，但最終的結果看起來也是一樣的。這是我試圖給出一個簡單答案的承諾。

這種情況將會出現在你的document.ready中，一些圖像可能已經加載（特別是那些已經被緩存了的圖像），有些圖像可能還未被加載。

// fade in images already loaded: 
$('.contentwrap img').fadeIn(1000); 
// and tell pending images to do the same, once they've finished loading: 
$('.contentwrap img').load(function() { 
    $(this).fadeIn(1000); 
}); 

由於jQuery將「堆棧」你的動畫效果，一旦事情是完全消退時，您可以再次調用淡入就可以了，並沒有什麼應該（明顯）發生。

如果這是不可接受的，你可能會設計一些更復雜的方式來檢查哪些圖像已經淡入，哪些沒有，在你設置加載事件之前。

祝你好運！

Answer 4

我最近處理這個爛攤子。我回答這個類似的問題，但它不完全是你在問什麼......

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 5

把你的代碼，這個函數的內部。如果你使用$（document），它會在dom加載後立即生效。如果你使用身體，它會在身體完全加載後啓動。這樣，您的圖片將在主體加載後始終淡入。

$('body').ready(function() { 
    //your code here 
}); 

Answer 6

我就在這個主題回答了這個過來：jQuery How do you get an image to fade in on load?

對我的作品！

Answer 7

爲了處理緩存的圖像，bobince的解決方案很有效，但正如他所說的，這很醜陋。

另一種解決辦法是隱藏自己的圖像，CSS和使用以下的javascript：

$(window).load(function(){ 
    $('.contentwrap img').not(':visible').fadeIn(1000); 
}); 

function showImages() { 
    $('.contentwrap img').load(function() { 
     $(this).fadeIn(1000); 
    }); 
}); 

showImages(); 

這樣，大多數圖像正確加載，如果他們被緩存起來，並隱藏馬上（負載功能沒有時間被解僱），頁面的加載事件將使它們出現。 頁面的加載事件確保一切都已加載。

Answer 8

如果從瀏覽器緩存中加載圖像，則可能不會觸發加載事件。爲了說明這種可能性，我們可以測試圖像的.complete屬性的值。

$(document).ready(function() { 

    $('img').hide(); 
    $('img').each(function(i) { 
     if (this.complete) { 
      $(this).fadeIn(); 
     } else { 
      $(this).load(function() { 
       $(this).fadeIn(); 
      }); 
     } 
    }); 
}); 

Answer 9

將這段代碼在網站的部分：

<script> 
     $('body').ready(function() { 

     $('img').hide(); 
     $('img').each(function(i) { 
      if (this.complete) { 
       $(this).fadeIn(); 
      } else { 
       $(this).load(function() { 
        $(this).fadeIn(2000); 
       }); 
      } 
     }); 
    }); 
</script> 

這可能不是最有說服力的解決方案，但它能夠完成任務。如果你想看到它的一個例子，請查看我使用它的site。

Answer 10

我使用David DeSandro的酷腳本檢查圖像是否已加載。 （例如，你可以寫一個函數，它增加了一個類加載的圖像，所以他們會在使用CSS過渡淡出檢查出來：
http://desandro.github.io/imagesloaded/

Answer 11

你可以把所有的圖像，並把它們放到一個圖像和褪色，但他們都在同一時間進來，這將是一個大文件，這取決於你想使用它。