加載圖標作爲背景圖片加載

Question

加載背景圖片需要一些時間。

如何檢查背景圖像（使用background-image CSS標籤應用）是否已完成加載？

Answer 1

默認情況下，您可以將加載圖標作爲默認背景圖像，然後在緩存加載圖像下載後通過javascript更新CSS。

這裏的顯示技術工作的例子：

$(document).ready(function() { 
 
    var imgSrc = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'; 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
    $("div").css("background-image", "url('" + img.src + "')"); 
 
    }; 
 
    img.src = imgSrc; 
 
});

div { 
 
    background-color: orange; 
 
    padding: 50px; 
 
    color: purple; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div>. 
 
    <p>This div will have a solid color as background to begin with.</p> 
 
    <p>Watch its background change to an image once it's loaded.</p> 
 
</div>