加载网页的部分内容

Question

我有一个非常大的网页，可以在其中加载大量包含图像的方框。页面上可能有3到100个盒子，每个盒子的高度为1000px。

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    ...
    ..
    .
</div>

我不希望用户必须等待10-100个高分辨率图像和内容加载到.box内，所以我试图找出只加载用户可以看到的内容的最佳方法并在用户滚动时继续加载。

有没有人能指出我正确的方向来实现这个目标？

Answer 1

http://jscroll.com/

无限滚动似乎是您的最佳选择。像tumblr这样的网站使用它在一个页面中拥有大量内容，但没有大量的加载时间。仅当用户向下滚动到页面底部时才会加载数据。

Answer 2

如前所述，无限滚动似乎是解决问题的好方法。 这是一个很棒的网站，有一些演示和一些你可以查找的代码。第一个演示似乎与您的网站完全相同：

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

祝你好运。

Answer 3

您可以捕获滚动事件，然后确定哪些元素可见并加载图像