加载网页的一部分

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

你可以捕捉滚动事件，然后找出哪些元素是可见的，加载图像，然后

Answer 2

http://jscroll.com/

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

Answer 3

如前所述，无限滚动似乎是一个很好的选择来解决您的问题。 这是一个很棒的网站，有一些演示和一些你可以查找的代码。第一个演示似乎是酷似你的网站：

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

好运。