Отложенная загрузка содержимого страницы с использованием JavaScript или jQuery

Question

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

В качестве примера сайта http://blog.rainbird.me/, где вы можете увидеть эффект. Как это может быть достигнуто с помощью jQuery и Ajax?

Answer 1

Вы делаете это так:

1: вычисляет максимальную высоту браузера для ваших пользователей (вероятно, можно предположить 1920px, так как очень немногие пользователи имеют дисплеи размером более 2560x1920)

2: сделать ваш список немного длиннее, чем 1920px, вы можете даже удвоить его, чтобы получить безопасное поле

3: подключить событие прокрутки к документу $(document.body).scroll(myScrollHandler)

4:когда document.body.scrollTop подходит достаточно близко к document.body.scrollHeight, вы добавляете больше данных на свою страницу

$.get(urlToGetMoreDataFrom,function(data){ $(document.body).append(data)});

Answer 2

function CheckIfElementIsInsideViewport(element)
{
    var jElement = jQuery(element);
    var jElementTop = jElement.position().top;
    var jElementBottom = jElement.height() + jElementTop;
    var jElementLeft = jElement.position().left;
    var jElementRight = jElement.width() + jElementLeft;

    var windowTop = jQuery(window).scrollTop();
    var windowBottom = jQuery(window).height() + windowTop;
    var windowLeft = jQuery(window).scrollLeft();
    var windowRight = jQuery(window).width() + windowLeft;

    var topVisible = jElementTop > windowTop && jElementTop < windowBottom;
    var bottomVisible = jElementBottom > windowTop && jElementBottom < windowBottom;
    var leftVisible = jElementLeft > windowLeft && jElementLeft < windowRight;
    var rightVisible = jElementRight > windowLeft && jElementRight < windowRight;

    return (topVisible && (leftVisible || rightVisible)) || (bottomVisible && (leftVisible || rightVisible));
}

/* Magazine sneakpeak loader (Only loads content when visible in viewport!) */  

var magazineSneakPeakHtml = "<p>Loaded!</p>";

jQuery(function()
{
    var sneakPeak = jQuery(".box-newestmagazinepeek");
    jQuery(window).bind("scroll", function() { SneakPeakMaybe(sneakPeak); });
    SneakPeakMaybe(sneakPeak);
});

function SneakPeakMaybe(jElement)
{
    if (CheckIfElementIsInsideViewport(jElement))
    {
        jQuery(".box-newestmagazinepeek .box-content").html(magazineSneakPeakHtml);
        jQuery(window).unbind("scroll");
    }
}

/**/

Как это сделать без jQuery: Как узнать, видим ли элемент DOM в текущем окне просмотра?

Это проверит, полностью ли виден элемент втекущий видовой экран:

function elementInViewport(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while(el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top >= window.pageYOffset &&
        left >= window.pageXOffset &&
        (top + height) <= (window.pageYOffset + window.innerHeight) &&
        (left + width) <= (window.pageXOffset + window.innerWidth)
    );
}

Вы можете изменить это просто, чтобы определить, видна ли какая-либо часть элемента в окне просмотра:

function elementInViewport2(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while(el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top < (window.pageYOffset + window.innerHeight) &&
        left < (window.pageXOffset + window.innerWidth) &&
        (top + height) > window.pageYOffset &&
        (left + width) > window.pageXOffset
    );
}

Вы можете разместить на своей странице элементы, которые отмечаютконец содержимого, когда этот элемент затем входит в область просмотра, вы можете загрузить и добавить новое содержимое под ним, используя jQuery ajax (get): http://api.jquery.com/jQuery.get/

Обратите внимание, что этот метод очень интенсивно использует процессор, так как он проверяет, еслиэлемент находится внутри области просмотра каждый раз, когда клиент прокручивает!

Answer 3

Ленивая загрузка контента: http://www.appelsiini.net/projects/lazyload

Загрузка содержимого при прокрутке: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/