Как можно заранее загрузить несколько изображений, чтобы во время их появления не было белого квадрата?
2 ответа
Вы можете использовать link prefetching
из HTML5
<link rel="prefetch" href="image.png">
Например:
<!DOCTYPE html>
<html>
<head>
<link rel="prefetch" href="https://images/img.png">
</head>
<body>
<img src="https://images/img.png">
</body>
</html>
-
1
Предзагрузка картинок на JavaScript (JQuery)
Вариант с загрузкой на JS, как мне кажется, один из самых лучший, особенно если вы имеете дело с анимацией. Его суть в том, что вы просто посредством JavaScript создаете копию картинки и загружаете её в буфер браузера, тем самым при необходимости уже не нужно будет подгружать картинку, так как она уже будет предварительно загружена.
Не люблю я JQ но что бы было всем проще можно вот таким кодом, где нужно заменить путь к картинке на свой и все будет работать:
//создаем JQuery функцию, которая будет подгружать изображения в буфер
jQuery.preloadImages = function()
{
for(var i = 0; i < arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[ i ]);
}
};
//указываем путь к изображению, которое нужно подгрузить
$.preloadImages("/tpl/testimg.png");
Если же вам нужно подгрузить несколько изображений, то вы просто можете перечислить их через запятую, вот так:
$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");
Картинок может быть любое количество.
Главное не забывайте про JQuery функцию, без нее предзагрузка работать не будет.
-
Тоесть для начала надо ждать загрузку JQuery, а уже потом загружать изображения... Почему нельзя написать этот код на ваниле в header'e? P.S. Знаю старый вопрос, но все же 8 янв 2019 в 19:17
display: none
к элементу, и после загрузки изменяйте его.