在DOM準備好之前用jQuery淡化圖像

我試圖讓我的網站的所有圖像都顯示淡入效果，類似www.blu-ray.com，但沒有運氣。在DOM準備好之前用jQuery淡化圖像

不幸的是，在我這樣做的方式中，由於我的網頁主體有點巨大，圖像開始顯示並在DOM準備好之前呈現並呈現，所以當DOM準備好時，腳本I' m使用會導致已經加載的圖像隱藏並再次出現！無論如何，要防止圖像出現，並在頁面開始加載時將其可見性更改爲「隱藏」狀態？

和否CSS請！這裏是我使用的腳本：

jQuery(document).ready(function() { 
    jQuery('img').css("opacity", 0).css("visibility", "hidden"); 
    jQuery('img').each(function(i) { 
     if (this.complete) { 
      jQuery(this).css("opacity", 1).css("visibility", "visible"); 
     } else 
      jQuery(this).load(function() { 
       jQuery(this).css("opacity", 0).css("visibility", "visible").animate({opacity: '1'}, 'slow'); 
      }); 
    }); 
});

任何幫助表示讚賞。

來源

2013-05-12 sa3er

是，設置爲隱藏在CSS中的圖片，否則與之共存。 – adeneo 2013-05-12 18:45:48

但blu-ray.com如何做到這一點？他們沒有隱藏在CSS中的img標籤的屬性！ – sa3er 2013-05-12 18:50:06

使用CSS設置公開程度

CSS

img{ 
    visibility:hidden; 
}

jQuery(document).ready(function() { 
    jQuery('img').load(function() { 
     jQuery(this).css({"opacity": 0, "visibility": "visible"}).animate({opacity: '1'}, 'slow');    
    }); 
});

來源

2013-05-12 18:46:36 Anoop

謝謝，但我想我說沒有CSS。假設用戶在沒有javascript支持或禁用JavaScript的客戶端上，則不會顯示圖像。那個怎麼樣？我只是想和blu-ray.com一樣！ – sa3er 2013-05-12 19:02:37

知道了！我只是想確定是否在客戶端啓用了JavaScript！只需要將其添加到我的文檔的頭部！ '' 謝謝大家。 – sa3er 2013-05-12 19:28:43

在DOM準備好之前用jQuery淡化圖像

回答

相關問題