Load (Lazy Loading) a Div, когда DIV становится видимым в первый раз

Ответ 1

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

$(document).ready(function(){
    $(window).scroll(function() {
        //check if your div is visible to user
        // CODE ONLY CHECKS VISIBILITY FROM TOP OF THE PAGE
        if ($(window).scrollTop() + $(window).height() >= $('#your_element').offset().top) {
            if(!$('#your_element').attr('loaded')) {
                //not in ajax.success due to multiple sroll events
                $('#your_element').attr('loaded', true);

                //ajax goes here
                //by theory, this code still may be called several times
            }
        }
    });
});

Правильное решение, которое учитывает прокрутку снизу здесь.

Ответ 2

Я искал это для загрузки рекламы с моего сервера OpenX только тогда, когда реклама должна быть видимой. Я использую iFrame версию openX, которая загружается в div. Ответ здесь поставил меня на путь решения этой проблемы, но опубликованное решение слишком простое. Прежде всего, когда страница не загружается сверху (в случае, если пользователь входит на страницу, нажав "назад" ), ни одна из разделов не загружается. Итак, вам понадобится что-то вроде этого:

$(document).ready(function(){
   $(window).scroll(lazyload);
   lazyload();
});

также вам нужно знать, что определяет видимый div. Это может быть div, полностью видимый или частично видимый. Если нижняя часть объекта больше или равна верхней части окна, а верхняя часть объекта меньше или равна нижней части окна, она должна быть видимой (или в этом случае: загружена). Ваша функция lazyload может выглядеть так:

function lazyload(){
   var wt = $(window).scrollTop();    //* top of the window
   var wb = wt + $(window).height();  //* bottom of the window

   $(".ads").each(function(){
      var ot = $(this).offset().top;  //* top of object (i.e. advertising div)
      var ob = ot + $(this).height(); //* bottom of object

      if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
         $(this).html("here goes the iframe definition");
         $(this).attr("loaded",true);
      }
   });
}

Проверено на всех основных браузерах и даже на моем iPhone, работает как шарм!

Ответ 3

Вы можете рассмотреть библиотеку точек точек:)

http://imakewebthings.com/waypoints/api/waypoint/

Его варианты использования и api определены в ссылке выше

При сжатии она составляет 9 кб. Он добавит дополнительный -100 мс-50 мс timelag во время загрузки страницы на 3g/4g

Изменить: - Он может использоваться автономно, а также поддерживает все основные структуры.

Ответ 4

Вот решение, которое ленивы загружает изображения, когда они попадают в 500 пикселей. Он может быть адаптирован для загрузки других типов контента. Сами изображения имеют атрибут data-lazy="http://..." с url изображения в нем, а затем мы просто помещаем фиктивное прозрачное изображение для атрибута src.

var pixelLoadOffset = 500;
var debouncedScroll = debounce(function () {
    var els = app.getSelector(el, 'img[data-lazy]');
    if (!els.length) {
        $(window).unbind('scroll', debouncedScroll);
        return;
    }
    var wt = $(window).scrollTop();    //* top of the window
    var wb = wt + $(window).height();  //* bottom of the window

    els.each(function () {
        var $this = $(this);
        var ot = $this.offset().top;  //* top of object
        var ob = ot + $this.height(); //* bottom of object
        if (wt <= ob + pixelLoadOffset && wb >= ot - pixelLoadOffset) {
            $this.attr('src', $this.attr('data-lazy')).removeAttr('data-lazy');
        }
    });
}, 100);
$(window).bind('scroll', debouncedScroll);

Функция debounce, которую я использую, выглядит следующим образом:

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
    };
}

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