JQuery'fadeIn'發射太快，在圖像加載完成之前

Question

我正在對我的朋友的投資組合網站（使用wordpress）進行最終修改，但我遇到了一個簡單的JQuery頁面轉換淡入效果的問題。

這裏的鏈接網站：（警告：NSFW）http://www.alexdebrabant.com/front/

在「項目」部分中，我使用的是Jquery的週期，以創建在崗的所有圖片的幻燈片。它運作良好。 但是在「肖像」部分，情況有點不同，因爲我每個帖子只有一張圖片。因此，PREV NEXT按鈕會將訪問者帶到新帖子，因此每次都需要加載新頁面。 我的想法是嘗試使用某種淡入淡出過渡從「項目」部分模擬幻燈片。 目前，我只有一個非常基本的淡入效果。 我的問題是，除非圖像被緩存，否則在圖像加載完成之前，fadeIn效果會過早激發。

我是一個JQuery新手，我懷疑必須有一個簡單的解決方案，但我似乎無法找到它。另外，如果你們有任何人知道Jquery效果可以更好地模仿/複製「PROJECTS」部分中的幻燈片，那也會很棒。也許一個頁面淡入淡出效果（如果存在）或淡出/淡入可能。

任何幫助將不勝感激。

下面的代碼：

<!-- contentload --> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#content').fadeIn(500); 

}); 
</script> 
<!-- contentload --> 

<style> 
#content {display: none;} 
</style> 

乾杯！

託姆

Answer 1

使用$(window).load()或$('img').load()代替$(document).ready()。整個點的document.ready是它在DOM準備好查詢時觸發，而不是當整個頁面已加載。

Answer 2

嘗試使用的jQuery load代替document.ready