CSS後運行代碼被加載，但圖像下載

圖片需要時間來下載，我的系統大約需要20秒下載完整的網站。他們是一個正在顯示的加載器，它隱藏在window.load事件上，即完成網站加載時（20秒）。

如果我在document.ready事件中隱藏加載器，網站顯示速度快，對用戶有好處。但是這裏的問題在於有些內容顯示沒有應用CSS約2秒，這看起來很奇怪。

我正在尋找一種方式來隱藏加載器一旦CSS加載，而圖像不是。

2016-10-09 Krish

您的網站不應該需要20秒加載。您應該花時間優化您的網站。您可以使用此工具分析您網站上應優化的內容 - https://developers.google.com/speed/pagespeed/insights/ – RasmusGlenvig

您可能還想優化您的圖片並嘗試將它們延遲加載，作爲最後一項措施採取。 –

事情我已經在過去所做這可能爲你工作的交換圖像src爲data-src，像這樣：

<img src="" data-src="your-image.jpg" alt="some alt description">

然後，所有你需要做的就是添加一些JavaScript代碼循環遍歷DOM交換數據-SRC的SRC：

jQuery(document).ready(function($){ 
    $('img').each(function(){ 
     $(this).attr('src') = $(this).data('src'); 
    }); 
});

這種技術的優點是，你的網頁將呈現CSS所有的圖像加載之前。這也意味着頁面的加載速度非常快。潛在的缺點是，這是不適合圖像搜索引擎優化（谷歌或Bing圖像）

2016-10-09 09:21:36 Aron

回答