jquery - 滚动 HTML 画廊,可能有很多图像,需要延迟加载/卸载?

标签 jquery lazy-loading image-gallery

我被要求将图像 d/b 查询的结果显示为 coverflow-y 类型水平滚动缩略图库(长边 256px,每个约 25kb)。如果(可能)需要一个库,我将使用 jQuery。除了图像之外,图库还可能会显示一些标题(文本)数据。

问题是,用户的查询可能会无意中提取 000 个结果。延迟加载解决了一方面,但我几乎找不到延迟卸载,就好像用户不断滚动图库项目的数量只会不断增加,最终导致浏览器与数据量作斗争。我想我需要让图库加载 10 个项目,显示前 5 个项目,然后惰性添加 X 个项目,之后对于添加的每个项目,我删除第一个图库项目。如果用户向下滚动,则需要延迟重新加载已删除的项目。

我认为这是其他人以前一定遇到过的问题 - 即使在稍微不同的显示上下文中。欢迎指导如何超越上述内容。另外,在 WAN(网络)环境中是否还存在我忽略的其他性能问题(例如要保持加载的图库项目的数量)?

澄清(回应答案#1)

也许“不引人注目”的卸载是一个更好的术语。其核心是(在 jQuery 上下文中)如何/在哪里放置创建/销毁调用?

假设画廊是滚动的 <ul> (可能水平,但我想应该允许垂直)显示 N <li>一次的项目。查询记录集的偏移量(此处从零开始)可用于播种 id,例如<li id="x_12">其中 12 是偏移值。这应该允许代码知道要创建/删除哪个偏移量和项目。它还可以检测开始时的到达(偏移量 0),同时基于 AJAX 的加载可以合并消息机制来指示没有下一个项目(即记录集的上端)。

这个原理,我明白了。但由于不太熟悉更复杂的 JavaScript 和 AJAX,我需要了解实际代码细节。我的假设是,如果基本概念有效,我很可能将其添加到现有的基于 JQuery 的画廊中(没有必要重新发明轮子)。

最佳答案

您需要做的是在下一个/上一个操作中创建/销毁(这可能是鼠标移动、滚动条等)。

你必须检测你要去哪个方向,走多少,然后使用该数字从行尾删除 x 数量的元素。但您必须记住,当走相反的路时,用户将不得不重新加载这些项目。

希望浏览器能够缓存图像,从而加快加载时间,并减少对服务器性能的影响。

在保持速度方面,我的经验法则是“在 View 区域的两侧滚动尽可能多的内容”,但这对于通用 slider 来说更多。如果您要加载大型项目,我会保留一些额外的内容以允许多次点击(我还会尝试每次加载更多内容)。

如果你有能力的话,我会尝试阻止用户无意中抓取 1000 件元素。如果这是一种选择,您可能需要考虑演示文稿的封面流程之外的其他内容。

关于jquery - 滚动 HTML 画廊,可能有很多图像,需要延迟加载/卸载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3317890/

相关文章:

javascript - jquery 复选框树是否支持使用类选择器而不是 Id 以编程方式扩展的能力?

c# - .net 应用程序中的 jQuery 日历

javascript - 单击时菜单不切换(关闭)

javascript - 在页脚加载延迟加载的button.js

c# - NHibernate - 延迟加载 : no session or session was closed

java - JPA 实体关系获取最佳实践

javascript - Jquery 语法错误,id 选择器上的表达式无法识别

php - 检查当前 WooCommerce 产品是否有图片库来运行 jQuery 脚本

cordova - 相机插件的缩小图库照片

html - href hashtag # 使模态弹出画廊点击跳转到网站顶部