Всем Здравствуйте, Как сделать так, чтобы background-image загружался до того как страница будет показана?
HTL
<div class="background"></div>
CSS
.background {
background-image: url(img/background.png);
}
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСамому сделать такое сложновато (как я понял, когда сам искал решения).
Нашел такой скриптик. Он позволяет выполнить скрипт после загрузки изображения с бекграунда, например, используя такой кодик (jQuery):
$('#container').imagesLoaded(
{ background: true },
function() {
console.log('Бек-изображения загружены!');
});
Но я, пока использовал его, столкнулся с тем, что бекграунды у псевдоэлементов он не инициализирует и не отслеживает их загрузку (даже с использованием функции готовности DOM). Это нужно знать, думаю.
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script> <!-- or --> <script src="https://unpkg.com/images[email protected]/imagesloaded.pkgd.js"></script>
добавил $('#background').imagesLoaded( { background: true }, function() { console.log('Бек-изображения загружены!'); });
все верно? если да, то все равно видно как изображение загружается, надеюсь я где-то ошибся..
26 янв 2017 в 15:54
Бек-изображения загружены!
, когда картинка полностью загрузилась. Правильно? Или он не выводит его тогда, когда они УЖЕ загрузились? Потому что тогда что-то не так, и это странно.
$('#background').css('display', 'block')
вместо консольного вывода из моего примера, например.