Сделать загрузку изображений, когда они входят в видимый раздел браузера?

Я просматривал веб-сайты, и я видел то, чего раньше не видел. на этом сайте: http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

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

Я предполагаю, что это какой-то плагин Wordpress (что он использует), но я не уверен. Это javascript? Действительно ли они загружаются на загрузку страницы, но становятся видимыми позже для "эффектного" эффекта или это действительно полезно для более быстрого времени загрузки страницы?

Ответы

Ответ 1

LazyLoad больше не доступен в соответствии с веб-сайтом. По-видимому, код больше не работает в новых браузерах, и автор не успевает его обновить.

Вставка "появляется" хорошо работает для меня.

http://plugins.jquery.com/appear/

Позволяет указать функцию обратного вызова для элемента. Функция обратного вызова вызывается, когда элемент отображается в поле зрения. На сайте:

$('#foo').appear(function() {
  $(this).text('Hello world');
});

Ответ 2

"в.ч.-содержание/плагины/JQuery-изображения ленивой загрузка"

Lazy loader - это плагин jQuery, написанный в JavaScript. Это задерживает загрузку изображений в (длинных) веб-страницах. Изображений вне видимости (видимая часть веб-страница) не загружается перед пользователем прокручивает к ним. Это противоположно предварительная загрузка изображений.

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

http://www.appelsiini.net/projects/lazyload

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

Ответ 3

Если вы посмотрите на источник страницы, на которую вы ссылаетесь, она содержит этот бит кода:

jQuery(document).ready(function($){
  jQuery(".SC img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

Я подозреваю, что они выполняют эффект. Он использует плагин jQuery LazyLoad, который можно найти здесь:

http://www.appelsiini.net/projects/lazyload