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

【问题标题】：Deferred loading of page content using JavaScript or jQuery使用 JavaScript 或 jQuery 延迟加载页面内容
【发布时间】：2011-01-14 10:40:51
【问题描述】：

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

例如，该站点是http://blog.rainbird.me/，您可以在其中看到效果。如何通过jQuery和Ajax来实现？

【问题讨论】：

为什么要关闭投票？我认为这是一个很好的问题。 +1

标签： javascript jquery asp.net ajax

【解决方案1】：

你这样做：

1：确定用户的最大浏览器高度（假设 1920 像素可能是安全的，因为很少有用户拥有大于 2560x1920 的显示器）

2：渲染您的列表，使其比 1920 像素稍长，您甚至可以将其加倍以获得安全边距

3：钩入文档$(document.body).scroll(myScrollHandler)的滚动事件

4：当document.body.scrollTop 与document.body.scrollHeight 足够接近时，您会在页面上添加更多数据

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

【讨论】：

【解决方案2】：

内容懒加载：http://www.appelsiini.net/projects/lazyload

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

【讨论】：

【解决方案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 (get) 在其下方加载和附加新内容：http://api.jquery.com/jQuery.get/

请注意，此方法非常占用 cpu，因为它会在每次客户端滚动时检查元素是否在视口内！

【讨论】：