破碎預裝的，只有在頁面已經被加載，僅適用於Chrome

我工作的一個網站LINK出於某種原因發生出現，預加載器壞了。我正在處理一些大的圖像，這些圖像應該放大到任何屏幕（可怕的FPS ..），因此我使用非常大的圖片（使用媒體查詢服務器1440p及以上，下面的所有圖片都可以獲得1080p圖片）。爲了防止用戶看到的白色空間，圖像沒有加載時，我使用的是直到內容已經被加載淡出圓形動畫預加載器固定全屏格。破碎預裝的，只有在頁面已經被加載，僅適用於Chrome

預加載我做了有兩個條件：

直到整個頁面加載固定在屏幕上。然後淡出
至少，5S在屏幕上，即使頁面比，5S加載更快，然後淡出，5S

該代碼，這是

$(document).ready(function() { 
    setTimeout(function() { 
     $('.loading').css('opacity', '0'); 
    }, 500); 
    setTimeout(function() { 
     $('.loading').remove(); 
    }, 1500); 
}); 

CSS for the fixed div in front of the content 
.loading { 
position:fixed; 
top:0; 
left:0; 
z-index:9999; 
width:100%; 
height:100%; 
background-color:#1abc9c; 
transition:.5s;

}

這似乎罰款的所有瀏覽器，但對於其中的頁面被加載，比頁面加載後，5S後的Chrome，在裝載機預閃光，迅速淡出。

如果預加載器可以說話，那麼可能會在Chrome上說：「嘿，等等，我應該出現在大家面前！啊，沒關係。」

所以無論如何，我正在尋找一個預加載的體面的解決方案：

保持固定的所有內容上面，直到所有的內容（包括背景圖片）已經被加載，然後
以0.5秒的動畫持續時間淡出。
用最少入住期間，屏幕上'，5S的時間，即使所有的內容都被加載比，5S更快。

誰能提供幫助？ :)

來源

2014-04-29 Sander Schaeffer

你有關於透明度的CSS過渡？如果是這樣，請張貼樣式。 – happyjack

我已經添加了過渡CSS，雖然它非常簡單。 :) –

你應該包括你希望的東西在你的風格進行轉換（在這種情況下opacity，或all），並根據瀏覽器版本的特性，包括多瀏覽器的前綴：

.loading { 
    transition: opacity .5s; 
    -webkit-transition: opacity .5s; 
    -moz-transition: opacity .5s; 
    -o-transition: opacity .5s; 
}

您還可能能夠達到同樣的效果在使用jQuery一個更好的辦法，並刪除過渡：

$('.loading').delay(500).fadeOut(500, function() { 
    $(this).remove(); 
});

另一件要指出的是，高分辨率的圖像不一定會內0.5加載秒。下面是如果圖像加載檢查的一個好辦法：SO

來源

2014-04-29 08:53:33 happyjack

謝謝！將嘗試並儘快報告。 :) –

簡單的Javascript部分的獎勵積分！非常感謝你。雖然查看鏈接的代碼，但我遇到了一些問題，因爲據我所知，代碼僅檢查單個圖像，還是查看內部函數。一旦選擇器'img'所針對的所有對象都是'.complete'，one（）會被執行嗎？如果是這樣，那麼我可以複製代碼並在裏面添加'.destroy（）'。或者我哪裏錯了？首先十分感謝！ –

@SanderSchaeffer很高興幫助！我所鏈接的代碼將分別應用於圖片標籤的每個實例。您是否希望在刪除加載覆蓋之前檢測所有圖像何時加載？這[插件]（https://github.com/desandro/imagesloaded）也可能有幫助。 – happyjack

破碎預裝的，只有在頁面已經被加載，僅適用於Chrome

回答

相關問題