jQuery无限加载（实时加载、不刷新页面）

admin · 发表于 2020-8-19 16:49:30

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

利用的是 jquery.ias.min.js 封包插件。
这个插件和已往发布的翻页、点击加载不同之处在于，这个插件并非是伪加载。而是根据滚动条与页底的距离实时载入数据。
也可以理解成：将本是第二页的内容在不刷新页面的情况下当滚动条达到页底距离时，继续往下载入。

<script type="text/javascript"> var ias = jQuery.ias({ container: ".footslist", //包含所有文章的元素 item: ".footprints", //文章元素 pagination: ".pg", //分页元素 next: ".pg a.nxt", //下一页元素 }); ias.extension(new IASTriggerExtension({ text: '<p>查看更多阅读记录</p>', //此选项为需要点击时的文字 offset: 3, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载 })); ias.extension(new IASSpinnerExtension()); ias.extension(new IASNoneLeftExtension({ text: '<div class="mtw">没有更多了</div>', // 加载完成时的提示 })); ias.extension(new IASSpinnerExtension()); ias.extension(new IASPagingExtension()); ias.extension(new IASHistoryExtension()); </script>

复制代码

须要注意的几个地方：
一。封包插件会自动为 pagination: ".pg",添加：style="display: none;"
二。如果不需要手动点击，直接删除 offset: 3,
三。如果不需要地址栏自动添加翻页地址，删除如下三行

ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension());

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-21 07:10:51

要实现 jQuery 无限加载（实时加载、不刷新页面）功能，你可以使用 `jquery.ias.min.js` 插件。这个插件通过监听滚动条的位置，当滚动条接近页面底部时，自动加载下一页的内容，从而实现无限加载的效果。

以下是你提供的代码的详细解释和注意事项：

### 1. 初始化 IAS 插件

var ias = jQuery.ias({
container: ".footslist", // 包含所有文章的元素
item: ".footprints", // 文章元素
pagination: ".pg", // 分页元素
next: ".pg a.nxt", // 下一页元素
});

复制代码

- `container`: 指定包含所有文章的元素，通常是列表的父容器。
- `item`: 指定每个文章的元素，通常是列表中的每一项。
- `pagination`: 指定分页元素，通常是包含分页链接的容器。
- `next`: 指定下一页的链接元素。

### 2. 添加扩展功能

ias.extension(new IASTriggerExtension({
text: '查看更多阅读记录', // 此选项为需要点击时的文字
offset: 3, // 设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));

复制代码

- `IASTriggerExtension`: 这个扩展允许你在加载到一定页数后，显示一个“查看更多”按钮，用户需要点击才能继续加载。`offset` 参数表示在第几页之后显示这个按钮。

ias.extension(new IASSpinnerExtension());

复制代码

- `IASSpinnerExtension`: 这个扩展会在加载新内容时显示一个加载动画（通常是旋转的圆圈）。

ias.extension(new IASNoneLeftExtension({
text: '没有更多了', // 加载完成时的提示
}));

复制代码

- `IASNoneLeftExtension`: 当没有更多内容可以加载时，显示一个提示信息。

ias.extension(new IASPagingExtension());

复制代码

- `IASPagingExtension`: 这个扩展会在加载新内容时自动更新地址栏中的 URL，以便用户可以通过浏览器的前进/后退按钮导航。

ias.extension(new IASHistoryExtension());

复制代码

- `IASHistoryExtension`: 这个扩展会在加载新内容时自动更新浏览器的历史记录。

### 3. 注意事项
1. **自动隐藏分页元素**：
- 插件会自动为 `pagination: ".pg"` 添加 `style="display: none;"`，以隐藏分页元素。

2. **取消手动点击加载**：
- 如果你不需要手动点击加载，可以直接删除 `offset: 3` 这一行。

3. **取消地址栏自动更新**：
- 如果你不需要地址栏自动添加翻页地址，可以删除以下三行：

ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension());

复制代码

### 4. 其他建议
- **性能优化**：无限加载功能可能会对页面性能产生影响，尤其是在加载大量内容时。建议对加载的内容进行分页处理，避免一次性加载过多数据。
- **用户体验**：确保加载动画和提示信息清晰可见，避免用户在加载过程中感到困惑。

### 5. 示例代码
以下是一个完整的示例代码：

var ias = jQuery.ias({
container: ".footslist", // 包含所有文章的元素
item: ".footprints", // 文章元素
pagination: ".pg", // 分页元素
next: ".pg a.nxt", // 下一页元素
});
ias.extension(new IASTriggerExtension({
text: '查看更多阅读记录', // 此选项为需要点击时的文字
offset: 3, // 设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
text: '没有更多了', // 加载完成时的提示
}));
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension());

复制代码

### 6. 参考文档
- 你可以参考 [DZ插件网](https://www.dz-x.net/) 上的相关文档和插件，获取更多关于 Discuz! 插件开发和优化的信息。

希望这些信息对你有所帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-21 14:55:42

要实现基于 `jquery.ias.min.js` 的无限加载功能，你提供的代码已经非常接近完整的实现。以下是对代码的详细解释和一些优化建议：

### 1. 基本配置

var ias = jQuery.ias({
container: ".footslist", // 包含所有文章的元素
item: ".footprints", // 文章元素
pagination: ".pg", // 分页元素
next: ".pg a.nxt", // 下一页元素
});

复制代码

- `container`: 这是包含所有文章列表的父元素。确保这个选择器正确指向你的文章列表容器。
- `item`: 这是每个单独的文章元素。确保这个选择器正确指向你的文章项。
- `pagination`: 这是分页元素。插件会自动隐藏这个元素（通过 `display: none;`）。
- `next`: 这是指向下一页的链接。插件会通过这个链接来加载下一页的内容。

### 2. 扩展功能

ias.extension(new IASTriggerExtension({
text: '查看更多阅读记录', // 此选项为需要点击时的文字
offset: 3, // 设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));

复制代码

- `IASTriggerExtension`: 这个扩展允许你在加载到一定页数后，显示一个“查看更多”按钮。用户需要点击这个按钮才能继续加载更多内容。
- `text`: 这是按钮上显示的文本。
- `offset`: 设置这个值后，插件会在加载到 `offset + 1` 页后显示“查看更多”按钮。如果你希望一直自动加载，可以删除 `offset` 参数。

ias.extension(new IASSpinnerExtension());

复制代码

- `IASSpinnerExtension`: 这个扩展会在加载新内容时显示一个加载动画（通常是旋转的圆圈）。如果你不需要加载动画，可以删除这行代码。

ias.extension(new IASNoneLeftExtension({
text: '没有更多了', // 加载完成时的提示
}));

复制代码

- `IASNoneLeftExtension`: 当没有更多内容可以加载时，这个扩展会显示一条提示信息。你可以自定义这条信息的内容。

ias.extension(new IASPagingExtension());

复制代码

- `IASPagingExtension`: 这个扩展会在加载新内容时更新地址栏中的 URL，以便用户可以通过浏览器的前进/后退按钮导航。如果你不需要这个功能，可以删除这行代码。

ias.extension(new IASHistoryExtension());

复制代码

- `IASHistoryExtension`: 这个扩展会在加载新内容时更新浏览器的历史记录。如果你不需要这个功能，可以删除这行代码。

### 3. 注意事项
- **自动隐藏分页元素**: 插件会自动为 `pagination` 元素添加 `style="display: none;"`，因此你不需要手动隐藏分页元素。
- **手动点击加载**: 如果你希望一直自动加载，而不需要用户手动点击“查看更多”按钮，可以删除 `offset: 3` 这一行。
- **地址栏更新**: 如果你不希望地址栏在加载新内容时自动更新，可以删除 `IASSpinnerExtension`、`IASPagingExtension` 和 `IASHistoryExtension` 这三行代码。

### 4. 完整代码示例

var ias = jQuery.ias({
container: ".footslist", // 包含所有文章的元素
item: ".footprints", // 文章元素
pagination: ".pg", // 分页元素
next: ".pg a.nxt", // 下一页元素
});
ias.extension(new IASTriggerExtension({
text: '查看更多阅读记录', // 此选项为需要点击时的文字
offset: 3, // 设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension()); // 加载动画
ias.extension(new IASNoneLeftExtension({
text: '没有更多了', // 加载完成时的提示
}));
// 如果需要地址栏自动添加翻页地址，保留以下三行
ias.extension(new IASPagingExtension()); // 更新地址栏
ias.extension(new IASHistoryExtension()); // 更新历史记录

复制代码

### 5. 其他建议
- **性能优化**: 如果页面内容较多，建议对加载的内容进行分页处理，避免一次性加载过多数据导致页面卡顿。
- **错误处理**: 可以在 `ias.on('load', function() { ... })` 中添加错误处理逻辑，确保在加载失败时给用户适当的提示。

如果你在实现过程中遇到任何问题，欢迎随时在 DZ插件网（https://www.dz-x.net/）寻求帮助，我们的技术团队会为你提供专业的支持。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。