LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

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

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

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

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

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

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

Обзор

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

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

Установка

HTML

<img src="clear.gif">


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

gif

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

CSS

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

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

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".