Загрузка значка в качестве загружаемого изображения фонового изображения

Question

Фоновое изображение занимает некоторое время, чтобы загрузить.

Как проверить, закончилось ли фоновое изображение (применяемое с помощью тега CSS-фона)?

Answer 1

Вы можете включить значок загрузки как фоновое изображение по умолчанию по умолчанию, а затем обновить CSS через javascript после загрузки загружаемого изображения с низкой загрузкой.

Вот рабочий пример, демонстрирующий технику:

$(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>