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

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

作为一个例子，该网站是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可能是安全的，因为很少有用户拥有大于2560×1920的显示器）

2：渲染你的列表，使其略长于1920px，你甚至可以加倍它以获得安全边距

3：挂钩文件$(document.body).scroll(myScrollHandler)上的scroll事件

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 = "
Loaded!
"; 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的情况下执行此操作： 如何判断DOM元素在当前视口中是否可见？

这将检查元素在当前视口中是否完全可见：

 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 /

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