Question

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

例如，该网站为http://blog.rainbird.me/，您可以在其中查看效果。如何通过jQuery和Ajax实现它？

Answer 1

你这样做：

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 2

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

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

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（get）加载并在其下面添加新内容：http://api.jquery.com/jQuery.get/

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

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

3 个答案: