Возможно вы захотите загрузить изображение в фоновом режиме, и вместо такой загрузки…
…вы увидите такую:
Обзор
Возможно, у вас есть галерея с большим количеством изображений высокого разрешения или игра с множеством активов. В любом случае процесс одинаков.
- Создайте Image программно с JavaScript
- Назначьте URL src атрибуту нового изображения
- Создайте обработчик для атрибута onload, он будет вызван, как только изображение загрузится
Установка
HTML
|
1
|
<img src="clear.gif">
|
Я использую gif с 1 чистым пикселем, который растягивается на весь тег изображения. Если вы не используете изображение, вы получите значок “missing/broken image” вроде этого:
В качестве альтернативы вы можете использовать версию изображения с низким разрешением, и когда загрузится изображение с высоким разрешением, вы можете поменять его.
CSS
В моем примере, я включил немного CSS, который добавит loading.gif в фон тега конечного изображения.
Вот CSS, который я использовал.
|
1
2
3
4
5
6
7
|
img {
width: 600px;
height: 450px;
background: url(loading.gif) 50% no-repeat;
border: 1px solid black;
border-radius: 5px;
}
|
Это поместит loading.gif в середину конечного изображения.
Javascript
Во-первых, вы хотите получить тег изображения, который вы хотите в конечном итоге заполнить.
В моем случае, это первое изображение на странице.
|
1
|
var image = document.images[0];
|
Тогда мне нужно создать изображение программно.
|
1
|
var downloadingImage = new Image();
|
После того как вы установите src атрибут этого изображения, скачивание начнется, поэтому, прежде мы хотим создать обработчик события onload. После того, как изображение загрузится, он заработает.
|
1
2
3
|
downloadingImage.onload = function(){
};
|
Затем мы хотим установить источник конечного image к источнику downloadingImage, другими словами, this источник.
|
1
2
3
|
downloadingImage.onload = function(){
image.src = this.src;
};
|
Наконец, мы хотим установить источник downloadingImage.
|
1
|
downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg";
|
Изображение начнет сразу загружаться в фоновом режиме. После завершения загрузки будет вызван обратный вызов onload и конечным источником будет вновь загруженное изображение.
И готово!
Вот полный код JavaScript:
|
1
2
3
4
5
6
|
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
image.src = this.src;
};
downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg";
|
Заключение
Это был технический обзор того, как загрузить изображение в фоновом режиме (асинхронно) с JavaScript в браузере. Как и во всех приложениях JavaScript, вам следует использовать код JavaScript для прогрессивного улучшения вашего сайта.
