Как подгружать картинки только в то время, когда они в зоне видимости?

Question

[Павел Гоголинский]

На либиринте (www.labirint.ru) и на озоне (www.ozon.ru/context/edlitera) картинки книг подгружаются только в тот момент, когда они появляются в зоне видимости экрана. Как этот эффект реализуется?

Answer 1

[Сергей ZSA]

Для отображения при нахождении в зоне видимости можно использовать viewportchecker.js НО тут js будет мало, так как на озоне выводится ещё и несколько товаров во время того, как человек достиг определенного момента на странице, а это осуществляется с помощью ajax и php в стороннем файле, который вытягивает необходимые товары из базы данных а это всё делается вот таким образом: roothelp.ru/lessons/ajax_podzagruzka_kontenta_pri_...

Answer 2

[Serg Sniffer]

// Универсальная функция для проверки расположения объекта в "области видимости"
$.fn.onViewPort = function(){
   var viewport = {};
   viewport.top = $(window).scrollTop();
   viewport.bottom = viewport.top + $(window).height();
   var bounds = {};
   bounds.top = this.offset().top;
   bounds.bottom = bounds.top + this.outerHeight();
   return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
};

// Используем после загрузки DOM
$(function() {
   // Инициализируем объект, который хотим отслеживать
   var $vTarget = $('.view-target');
  // Проверяем при скролле страницы
   $(window).scroll(function() {
      if($vTarget.onViewPort()) {
         console.log('Объект в области видимости');
      }
   });
});

Answer 3

[trevoga_su]

www.appelsiini.net/projects/lazyload

Comments

[Павел Гоголинский]

битая

[trevoga_su]

Павел Гоголинский: рабочая