Как работает отложенная загрузка изображений с помощью JavaScript?

Question

Мне любопытно, как работает ленивая загрузка изображений, изображений, которые будут загружаться при их прокрутке.

Любой намек?

Answer 1

Вот инструкции с использованием плагинов: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ вот плагин jquery: http://www.appelsiini.net/projects/lazyload

в основном вы помещаете фиктивное изображение в свой атрибут src и добавляете еще один атрибут для фактического изображения, JS определяет положение прокрутки страницы и загружает данные изображения, как только вы подойдете достаточно близко к изображению. это происходит путем замены src источником фактического изображения.

вот еще одно объяснение: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

Answer 2

И пример того, как это легко сделать.

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">

«lazy.jpg» можно использовать на всех изображениях, в результате чего будет загружено только одно изображение (и это изображение с небольшим весом 1x1px). Итак, подумайте, у меня есть список из 250 магазинов для посещения, с логотипом компании для каждого. Может выглядеть так:

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg">
...

Тогда приходит волшебство! Поместите это в свой файл JavaScript:

$('img[src="/images/lazy.jpg"]').each(function(index, el) {
    $(el).attr('src', $(el).data('real-src'));
});

И, вака-вака, все изображения lazy.jpg будут заменены их "настоящими" изображениями. Цель - ускорить загрузку вашей html-страницы (поскольку все эти 250 компаний имеют одинаковый «логотип» в lazy.jpg :) ... Но JS позаботится обо всем после завершения загрузки DOM.

Это, конечно, решение jQuery. Можно сделать и с чистым js.

Answer 3

Вы можете использовать justlazy , который не зависит от таких зависимостей, как jQuery, и очень легкий:

Единственный вызов, который вам нужен:

var placeholders = document.querySelectorAll(".load-if-visible");
for (var i = 0; i < placeholders.length; ++i) {
  Justlazy.registerLazyLoad(placeholders[i]);
}

Заполнители должны иметь следующую структуру:

<span data-src="url/to/image" data-alt="some alt text"
      data-title="some title" class="load-if-visible">
</span>

По причинам SEO вы можете использовать любой другой заполнитель (например, изображение заполнителя).

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

Answer 4

Ленивая загрузка изображений с использованием обычного способа присоединения слушателя к событиям прокрутки или с помощью setInterval крайне неэффективна, так как каждый вызов getBoundingClientRect () заставляет браузер переделывать всю страницу и представит значительный рывок на ваш сайт.

Используйте Lozad.js (всего 569 байт без зависимостей), который использует InteractionObserver для эффективной отложенной загрузки изображений.

Answer 5

Есть много способов реализовать отложенную загрузку. Процесс просто в том, что вы загружаете то, что вам нужно. Вы можете лениво загружать что угодно в программной сцене. На веб-сайтах большинство используют его при загрузке изображений, и это потому, что большая часть веб-сайта в основном просто изображения. Я имею в виду обложки сайта и фотографии реальных людей, которые могут иметь тысячи изображений на вашем сервере. Обычно это приводит к замедлению, когда вы пытаетесь загрузить их все одновременно. В какой-то момент это начинает замедлять процесс. Таким образом, отложенная загрузка обычно выполняется для больших сайтов. Как я уже сказал, вы можете сделать это множеством способов. один путь уже был дан. Уже загружен тег img, но часть src указывает на файл-пустышку небольшого размера. Не используйте графическое изображение или рисунок ... используйте что-то вроде серого блока ... или ничего не используйте. Затем, когда часть прокрутки находится рядом с точкой прокрутки, где изображения находятся рядом. Он запустит функцию, где он заменит src реальным изображением. Другой способ - использовать ajax и точку прокрутки, когда close будет добавляться ... загружать фактический HTML-код с изображением в src. Это то, что я на самом деле использую. Я пишу файл PHP для ленивой загрузки изображений, данных, текста.

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