Lazyloading背景圖片/淡入替換背景圖片

Question

我正在構建一個使用Maximage jquery插件來運行背景圖片幻燈片的網站。由於圖像的大小，我決定嘗試實施一種懶惰加載方法，它將用在後臺下載的更高質量的圖像替換質量較低的圖像。

該代碼有效，但問題是存在一個明顯的閃光燈，因爲maximage幻燈片的background-image src被更改爲指向更高質量的圖像。

我不知道如何解決這個問題，有沒有一種方法來淡出在替換div的背景圖像？

感謝您的任何幫助。

Answer 1

你能否以這樣的方式編寫它：一旦高質量圖像加載完成，而不是替換低質量圖像，則將高質量插入到DOM中作爲隱藏的DIV或類似的東西。

然後，當您在高質量包裝DIV（即同時動畫）處淡入淡出質量低的包裝DIV作爲動畫完成的回調，分離/隱藏低質量的DIV。儘管如此，這仍然可能會導致某些瀏覽器/設備閃爍，但我必須設置演示或其他內容才能看到。