当用户向下滚动内容时,如何加载内容?

时间:2012-02-12 09:56:58

标签: javascript jquery html css scroll

  

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

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

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

的内容

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