Асинхронная загрузка изображения с JavaScrip

асинхронная загрузка изображений

Возможно вы захотите загрузить изображение в фоновом режиме, и вместо такой загрузки…

загрузить изображение

…вы увидите такую:

загрузить изображение

Обзор

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

Создайте Image программно с JavaScript
Назначьте URL src атрибуту нового изображения
Создайте обработчик для атрибута onload, он будет вызван, как только изображение загрузится

Установка

HTML

<img src="clear.gif">

Я использую gif с 1 чистым пикселем, который растягивается на весь тег изображения. Если вы не используете изображение, вы получите значок “missing/broken image” вроде этого:

gif

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

CSS

В моем примере, я включил немного CSS, который добавит loading.gif в фон тега конечного изображения.

Вот CSS, который я использовал.

img {
  width: 600px;
  height: 450px;
  background: url(loading.gif) 50% no-repeat;
  border: 1px solid black;
  border-radius: 5px;
}

Это поместит loading.gif в середину конечного изображения.

Javascript

Во-первых, вы хотите получить тег изображения, который вы хотите в конечном итоге заполнить.

В моем случае, это первое изображение на странице.

var image = document.images[0];

Тогда мне нужно создать изображение программно.

var downloadingImage = new Image();

После того как вы установите src атрибут этого изображения, скачивание начнется, поэтому, прежде мы хотим создать обработчик события onload. После того, как изображение загрузится, он заработает.

downloadingImage.onload = function(){

};

Затем мы хотим установить источник конечного image к источнику downloadingImage, другими словами, this источник.

downloadingImage.onload = function(){
    image.src = this.src;   
};

Наконец, мы хотим установить источник downloadingImage.

downloadingImage.src = "//an.image/to/aynchrounously/download.jpg";

Изображение начнет сразу загружаться в фоновом режиме. После завершения загрузки будет вызван обратный вызов onload и конечным источником будет вновь загруженное изображение.

И готово!

Вот полный код JavaScript:

var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
    image.src = this.src;   
};
downloadingImage.src = "//an.image/to/aynchrounously/download.jpg";

Заключение

Это был технический обзор того, как загрузить изображение в фоновом режиме (асинхронно) с JavaScript в браузере. Как и во всех приложениях JavaScript, вам следует использовать код JavaScript для прогрессивного улучшения вашего сайта.

09-03-2016