使用JavaScript或jQuery延迟加载页面内容

Question

我已经看到一些网站，其主页太大，当用户向下滚动阅读页面末尾的内容时，页面的一些区域会动态加载。他们如何设计他们的页面？

作为一个例子，该网站是http://blog.rainbird.me/你可以看到效果。如何通过jQuery和Ajax实现它？

Answer 1

的内容延迟加载：http://www.appelsiini.net/projects/lazyload

加载内容，同时滚动：http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Answer 2

你不喜欢这样：

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 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： How to tell if a DOM element is 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) 
    ); 
} 

您可以修改此简单地确定元素的任何部分中视可见：

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追加它下面的新内容（获得）：http://api.jquery.com/jQuery.get/

请注意，这种方法是非常CPU密集型的，因为它检查元素是视每次内部客户滚动！