0

我一直在花很多时间在 jQuery 上寻找一个具有无限滚动功能的插件。大多数情况下，它总是一起使用 PHP，MySQL。你对前端无限滚动有什么建议吗？我正在建立一个加载近 500 张图片的图片库。

        <section class="work">

            <figure class="new_release">
                <a rel="new_release" class="fancybox" href="images/big/1.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend mauris tincidunt dui mattis lacinia vel nec orci. Aliquam eget.">
                    <img src="images/1.png" alt="afadsf" />
                    <dl>
                        <dt>Client</dt>
                            <dd>Envato</dd>
                        <dt>Role</dt>
                            <dd>Popularity</dd> 
                    </dl>
                </a>    
            </figure>   

            <figure class="Popularity">
                <a rel="Popularity" class="fancybox" href="images/big/2.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend mauris tincidunt dui mattis lacinia vel nec orci. Aliquam eget.">
                    <img src="images/2.png" alt="" />
                    <dl>
                        <dt>Client</dt>
                            <dd>Envato</dd>
                        <dt>Role</dt>
                            <dd>Popularity</dd> 
                    </dl>
                </a>    
            </figure>   
                            .....
                            .....
                            .....
        </section>

Figure 容器将是显示其他图像的重复代码。

4

2 回答 2

0

Infinite Scroll 允许您在开始时保持页面内容较小，然后根据请求通过 Ajax 进行扩展。当您滚动到边缘（通常是页面底部）时，会显示某种加载微调器。

通常为此使用 jQuery，因为跨浏览器滚动检测可能有些费力。所以像这样的一些片段对于这种类型的检测很常见：

//Bind Scroll Event Listener
    $(window).scroll(function () {
       if ($(window).scrollTop() + $(window).height() == $(document).height())
          // End of page reached...
          // Show loading spinner
          // Make Ajax Call
          // When Ajax Call finishes, hide spinner, append retrieved data
          // Update some counter
          // Page height is now expanded, and process can repeat
    }

通常会保留某种计数器来确定到目前为止已加载了多少“页面”。这被传递给服务器端脚本以将结果集限制为特定页面。

或者，使用一些 JavaScript/jQuery，您可以删除以前的内容，只有在您滚动回顶部时才能恢复它。

在您的情况下，您可能最终会维护一些包含图像数组的硬编码 JavaScript 对象作为分页过程，并在显示微调器时预加载它们，在所有预加载完成后附加。

于 2013-02-07T20:32:38.957 回答
0

我遇到了这个，它看起来像是一个 wordpress 插件和 jquery 插件。

http://www.infinite-scroll.com/

我假设一旦你有了一个图像列表，你就可以在不使用 PHP 和 mySQL 的情况下轻松管理它。人们可能正在使用 PHP 和 mySQL 进行数据分页。

于 2013-02-07T20:18:29.607 回答