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

0

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

progressive

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

async

Обзор

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

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

Установка

HTML

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

missing_image

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

CSS

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

loading

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

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

Javascript

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

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

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

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

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

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

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

И готово!

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

Заключение

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

Поделиться: