Question

我花了很多时间来浏览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>

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

Answer 1

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

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

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

Answer 2

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对象作为您的分页过程，并在显示微调器时预加载它们，在所有预加载完成后附加

没有PHP的jQuery Infinite Scrolling可能吗？

2 个答案: