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

Question

[pasha bpv]

Как это сделать с помощью jquery?

Answer 1

[Олег Краснов]

Lazy Load Plugin for jQuery

Answer 2

[Дмитрий Сурин]

HTML

<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>

JS

function lastPostFunc() 
{ 
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
    $.post("scroll.php?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),     

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);            
        }
        $('div#lastPostsLoader').empty();
    });
}; 

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

Comments

[pasha bpv]

$.post("scroll.php?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id") - что означает эта строчка? Мне нужно сделать чисто на jquery без php....

[Дмитрий Сурин]

Эта строчка, для случая если у Вас отображено 39 картинок, говорит где брать 40 картинку. Функция lastPostFunc() вызывается когда мы докрутили до низа страницы. Если нужны еще пояснения, то, пожалуйста, опишите свою задачу подробнее (а именно не понятно, какой у Вас исходный набор данных).

Answer 3

[GM2mars]

Поместите линки на картинки в какие-нибудь data атрибуты, типа data-img="bigLoader.gif", а src сделайте какую-нибудь заглушку src="empty.png". По скроллу до определенного момента меняете у элементов src, из data-img.
Механизм скролла:
1. определяете нужный вам порог (к примеру 1000px от верха страницы)
2. функция по событию скролла: если положение скролла > порога, то выполяете функцию для замены src и присваиваете к порогу текущее положение скролла+1000px.
(но механизм может быть другой, в зависимости от вашего вывода контента)

Механизм подмены src у картинок:
1. к примеру у каждой картинки есть id. Сначала мы загружаем изображения для картинок от 1-10, сохраняем крайнее значение 10. Потом при выполнении функции от 10-20 и так далее, просто запоминая id последней загруженной картинки.

Самая простая реализация которая пришла в голову.