-1

我有一种情况，我不确定最好的前进方式。

我有一个画廊和一个通过页面查看或在页面上查看所有一个的选项。

问题是一页一页地查看它们。可以有很多很多图像。1000+。

现在我马上想到要么使用延迟加载 jquery 插件，要么使用 ajax 来检索新图像并在滚动时插入它们。（我的想法是 ajax 更好，因为使用延迟加载插件意味着仍然有 1000 多个 DOM 元素需要跟踪和操作等？）无论如何，问题与它们没有直接关系。

如果只是这样，那么我将实现 ajax 方法。

问题在于页面上我有 2 个功能。

一个用于随机播放页面上所有图像的按钮。因此，如果有很多图像，您可以单击该按钮，它会随机显示。

一个滑块，可在 3 种尺寸之间切换，以将它们视为中小或大（大是默认视图，当缩放完成后，它会替换图像 src，这是一个适合新尺寸的预制图像）。

问题是，如果我使用 Ajax，我不确定如何处理 shuffle，因为 shuffle 只会重新排列当前在 DOM 中的图像（这就是它现在的工作方式，只是重新排列 html 的顺序。

第二个问题是滑块......但是我假设我可以设置它，这样当它们减少时它会检测页面上是否还有任何空间，如果是这样，ajax 调用下一部分来填写差距...

此外，我使用延迟加载方法的测试是，在洗牌时，如果页面上的图像太多，页面会在尝试洗牌 1000 多张图像时锁定几秒钟。（延迟加载还有其他问题，例如当新的随机项目进入视图时，图像未加载，并且当使用滑块时，新图像进入视图时，它们未加载......但这是一个问题或与延迟加载本身有关的设置）

也许我错过了一些东西，或者有一个我不知道的替代方案。

所以问题真的是。

什么是不让浏览器阻塞的最佳方式/最有效的方式，以处理大量图像，保持能够洗牌和改变图像比例的功能。

4

1 回答 1

1

免责声明：我当然知道我要说的所有内容都可能存在高度争议或不完整，并且可能受到我自己的背景的影响，但我只是想就一个非常广泛的问题给你一些想法。

即使您需要实现这些功能，我也不会放弃 ajax 解决方案。

如果用户按下随机播放按钮，您可能只显示一个加载程序并通过 ajax 询问一个 json，其中包含在服务器端随机播放的完整图像列表，例如

{
   "images" : [
      321,94,566,302,729,136... 
   ]
}

然后，当接收到 json 时，使用数组的前n 个元素的块来预加载并在文档上插入前n 个图像。

     <img src="/high-res/321.jpg" />
     <img src="/high-res/94.jpg" />
     <img src="/high-res/566.jpg" />
     ...

关于滑块：

...大是默认视图

在这种特定情况下，您实际上并不需要加载相同资源的中分辨率和低分辨率版本：只需缩放高分辨率图像（通过 css, transform: scale(...)）。

这种方法的真正问题是你会惩罚移动设备，所以如果你需要支持它们，我的方法可能是之前检查小视口 - 在移动设备上 - 我总是会发送低分辨率分辨率图像，没有缩放的可能性（认为这是优雅的降级或您的应用程序）。

当用户滚动时，您将开始读取下一个数组元素块（当您打乱元素时，您已经拥有）并使用新图像创建 DOM 结构。可以根据您当前使用的分辨率调整块的大小：

例如，对于高分辨率图像，使用一小组图像进行预加载。在移动设备上，我可能会一次预加载更多元素，但在这种情况下，我不会使用滚动事件：我更愿意显示“加载更多”按钮

于 2013-06-28T14:33:23.480 回答