Delay loading page content using JavaScript or jQuery

Question

I saw several websites where their homepage is too big, and when the user scrolls down to read the content at the end of the page, then several areas of this page load dynamically. How do they create their page?

As an example, the site is http://blog.rainbird.me/ , where you can see the effect. How can this be done using jQuery and Ajax?

Answer 1

Lazy content loading: http://www.appelsiini.net/projects/lazyload

: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Answer 2

:

1: (, 1920px, , 2560x1920)

2: , 1920 , ,

3: $(document.body).scroll(myScrollHandler)

4: document.body.scrollTop document.body.scrollHeight,

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

Answer 3

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)
    );
}

You can change this simply to determine if any part of the element is visible in the viewport:

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
    );
}

You can place elements on your page that mark the end of the content when this element then enters the viewport, which you can download and add new content below it using jQuery ajax (get): http://api.jquery.com/ jQuery.get /

Please note that this method is very intensive as it checks to see if the item is inside the viewport every time the client scrolls!