当用户向下滚动内容时，如何加载内容？

Question

  

可能重复：
  How to load the web page content based on user scrolling

我正在创建一个单页网站，我希望能够实现您在http://www.talentgarden.it/it/#!/home上看到的效果，其中内容在您向下滚动时加载。谁能告诉我如何做到这一点，以及如何实现该网站上使用的一些不同的淡入效果。

Answer 1

我使用Lazyload插件。请参阅更多详细信息 http://www.appelsiini.net/projects/lazyload

Answer 2

在您的示例中，当用户滚动时，页面实际上并未加载。内容实际上是隐藏的，然后在用户滚动时显示。

无论如何，这都是关于阅读内容高度和浏览器窗口本身的差异。对于例如Twitter的滚动机制 - Google“Twitter Infinite Scroll”。

有关您在那里展示的示例 - 请查看this JS Bin demo（点击渲染，然后检查右上角，您就明白了）。此外，我相信用于该特定网站的插件是jQuery的“Lazyload”插件。我相信很容易合作; http://www.appelsiini.net/projects/lazyload它延迟了图像的渲染，使得初始加载时间更快一些。

Answer 3

虽然延迟加载可能会有所帮助。我怀疑您链接的网站实际上使用的是更接近Scrollorama

的内容

Scrollorama旨在向下滚动内容时更改（包括显示/隐藏）内容。