使用纯 JavaScript 的基本无限滚动/延迟加载博客文章
Posted
技术标签:
【中文标题】使用纯 JavaScript 的基本无限滚动/延迟加载博客文章【英文标题】:Basic infinite scrolling/lazy loading blog posts with pure JavaScript 【发布时间】:2017-03-28 16:45:48 【问题描述】:我正在寻找一种轻量级解决方案(希望没有 jQuery,但我愿意接受建议)来“延迟加载”一个长 html 页面,该页面在客户端索引大量博客文章。大多数解决方案都面向 AJAX,以从服务器端加载数据或处理分页。我需要找到一个适用于单个长页面的东西,该页面完全加载在无限滚动的客户端。
所以 HTML 是这样的:
<div id="blog-post">
<h2 class="post-title">Cupcake ipsum.</h2>
<img class="post-image" src="img/posts/cupcakeIpsum.jpg">
<p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
<hr>
</div>
这段相同的摘录基本上一次又一次地重复相同的方式。我基本上想在开始时显示 3 篇博文,一旦滚动到视口底部,我想展示另一组 3 篇博文。
关于如何使用纯 javascript 实现这一点的任何想法? (ES6 可能。)
【问题讨论】:
google.com/search?q=es6+infinite+scrolling 我试过了,90% 的结果都是用 React 的。 剩下的 10% 呢?特别是这个:derickbailey.com/2015/11/18/… 你为什么不试试google.com/search?q=es6+infinite+scrolling+-react? @cinnaroll45 我认为您应该在问题中提到这都是客户业务 【参考方案1】:您可能需要在您的#blog-post
div 中添加一些attr
。像visible
class 或其他东西(顺便说一句,将 id 添加到重复的 div 不是一个好主意。您的脚本将失败并且通常仅适用于第一项。您需要使用 class
而不是 id
)。
window.onscroll = function(ev)
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight)
// you're at the bottom of the page
// console.log("Bottom of page");
var posts = document.querySelectorAll('.blog-post:not(.visible)');
for(i = 0; i < posts.length; i++)
if(posts[i] != undefined && i < 3)
posts[i].className += "visible";
;
.blog-post
/*display:none;*/
opacity:0;
transition: opacity 5s;
.visible
/*display:block !important;*/
opacity:1;
<div class="blog-post visible">
<h2 class="post-title">Cupcake ipsum.</h2>
<img class="post-image" src="http://placehold.it/350x150">
<p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
<hr>
</div>
<div class="blog-post">
<h2 class="post-title">Cupcake ipsum.</h2>
<img class="post-image" src="img/posts/cupcakeIpsum.jpg">
<p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
<hr>
</div>
<div class="blog-post">
<h2 class="post-title">Cupcake ipsum.</h2>
<img class="post-image" src="img/posts/cupcakeIpsum.jpg">
<p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
<hr>
</div>
滚动方法取自 & 测试:https://***.com/a/31264162/2259466
注意:转换在我的代码中没有按预期工作。您也需要使用 display none 但不能使用动画(实际上可以,但需要解决方法)。或者你可以在 js 中使用动画,更难。
所以一般代码需要看起来像它。我知道它还没有完成,但我希望它能让你有所了解。
【讨论】:
关于 ID 的好建议,感谢您的回答。我已经检查过了,但正如你所提到的,转换存在问题。现在,我正在使用 jquery 延迟加载插件。它只关注延迟加载照片,方法是使用相同的占位符来处理图像,并在滚动时用它们的原始数据属性替换它们。关于如何与您发布的类似内容一起使用的任何想法?以上是关于使用纯 JavaScript 的基本无限滚动/延迟加载博客文章的主要内容,如果未能解决你的问题,请参考以下文章