Ajax的 - 限制列表的装载，然后装入上滚动的其余部分 [英] Ajax - limit the loading of a list and then load the rest on scroll

问题描述

我有一个存储，显示的类别中的所有产品在一个页面上（这是主人怎么喜欢它，分页不是一个选项）。

要改善加载时间上有些沉重的类别，我希望能实现以股代息，这将载入多项产品＆LT;李＆GT; S 键，然后在页面滚动，加载另一套。

该页面具有这种结构产生的

 ＆LT; D​​IV ID =CategoryContent＆GT;
  ＆LT; UL类=产品列表＆GT;
       ＆LT;李类=奇＆GT;产品＆LT; /李＆GT;
       ＆LT;李类=甚至＆GT;产品＆LT; /李＆GT;
       ＆LT;李类=奇＆GT;产品＆LT; /李＆GT;
       ＆LT;李类=甚至＆GT;产品＆LT; /李＆GT;
  ＆LT; / UL＆GT;
 

在理想情况下，我想。加载前25 ＆LT;李＆GT;产品＆LT; /李＆GT; 键，直到加载整个页面，当用户滚动至底部，加载下一个20

。

我从来没有玩过AJAX之前，所以我不知道：

这是可能与当前的设置

要提高加载时间

影响搜索引擎优化这些页面

我已经看到了一些例子，演示等这个jQuery实例 - 但这需要特定ID的等等，我不知道这会提高网页加载？     

解决方案

这是一个叫做无限滚动的概念。谷歌是什么，以及你会发现你要寻找的。

无限滚动的jQuery插件是一个jQuery插件这将支持你想要做什么，而且还有其他的。

I have a store that shows all products of a category on one page (and this is how the owner likes it so pagination is not an option).

To improve load time on some heavy categories, I'm hoping to implement a scrip which will load a number of products <li>s and then on page scroll, load another set.

The page is generated with this structure

<div id="CategoryContent">
  <ul class="ProductList">
       <li class="Odd">Product</li>
       <li class="Even">Product</li>
       <li class="Odd">Product</li>
       <li class="Even">Product</li>
  </ul>

Ideally I would like to. Load first 25 <li>Products</li> and when the user scrolls to the bottom, load the next 20 until the whole page is loaded.

I've never played with AJAX before so I'm not sure if:

It's possible with the current setup

Going to improve load time

Affect SEO for those pages

I have viewed some examples and demos such THIS JQUERY EXAMPLE - but this requires specific id's etc and I'm not sure if that would improve page loading?

解决方案

This is a concept called infinite scrolling. Google for that, and you'll find what you're looking for.

infinite-scroll-jquery-plugin is a jQuery plugin that will support what you're trying to do, and there are others.

这篇关于Ajax的 - 限制列表的装载，然后装入上滚动的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！