使用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密集型的，因爲它檢查元素是視每次內部客戶滾動！