Предзагрузка картинки для background

283
29 марта 2017, 16:27

Добрый день, пишу свой прелодер на сайт, на блок добавлена background-image *.svg и установлен background-color, однако иногда интернет подлагивает , bg-image грузит дольше чем цвет фона, хотелось бы узнать как сделать предзагрузку изображения *.svg, а затем bg-image дать значение изображения

Answer 1

Для chrome браузеров можно воспользоваться тем, что <link rel='preload'> генерирует событие load:

document.getElementById('bgpreload').addEventListener('load', () => 
  document.body.classList.add('bgLoaded') 
);
body.bgLoaded { 
  background-image: url("http://lorempixel.com/400/200/"); 
  background-color: red; 
}
<link id="bgpreload" rel="preload" as="image" href="http://lorempixel.com/400/200/" />

Если картинка кэшируема, то можно так:

var img = document.createElement('img'); 
img.onload = function() { 
  document.body.className += ' bgLoaded'; 
} 
img.src = 'https://placeimg.com/400/200/any';
body.bgLoaded { 
  background-image: url("https://placeimg.com/400/200/any"); 
  background-color: red; 
}

READ ALSO
index.html подключает `styles.less` вместо `styles.css`

index.html подключает `styles.less` вместо `styles.css`

почему у меня сменилось stylescss на styles

246
div width 100% overflow-x

div width 100% overflow-x

Как реализовать прокрутку при div width = 100%; ? При установке ширины блока в пикселях все отлично работает

201
max_connections в mysql и его сброс

max_connections в mysql и его сброс

На shared хостинге возникла проблемаПревышено максимальное количество подключений к мускулу и сайт лежит

262