Deferred loading of page content using JavaScript or jQuery

I have seen a few websites where their home page is too big and when user scroll down to read the content at the end of the page then a few areas of that page load dynamically开发者_如何转开发. How do they design their page?

As an example the site is http://blog.rainbird.me/ where you can see the effect. How can it be achieved it via jQuery and Ajax?

You do it like this:

1: figure out the maximum browser height for your users (it's probably safe to assume 1920px as very few users have larger than 2560x1920 displays)

2: render your list so it is slightly longer than the 1920px, you can even double it to have a safe margin

3: hook into the scroll event on the document $(document.body).scroll(myScrollHandler)

4: when document.body.scrollTop gets close enough to document.body.scrollHeight you append more data on your page

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

Lazy load of content: http://www.appelsiini.net/projects/lazyload

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

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

/**/

How to do it without jQuery: How to tell if a DOM element is visible in the current viewport?

This will check if the element is entirely visible in the current viewport:

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 could modify 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 note the end of content, when this element then enters the viewport you can load and append new content below it using jQuery ajax (get): http://api.jquery.com/jQuery.get/

Please note that this method is very cpu intensive, since it check if the element is inside the viewport everytime the client scroll!