【问题标题】:Webpage with lots of images: slow scrolling?包含大量图像的网页:滚动缓慢?
【发布时间】:2011-09-04 14:50:30
【问题描述】:

我有一个带有新闻提要的网页。新闻提要有一堆垂直堆叠的图像。当用户向下滚动时,新图像会填充页面。

一切开始时又快又顺畅,但随着更多图像加载(以及更多向下滚动),页面开始变得非常缓慢和波涛汹涌。滚动变得超级不流畅。

有什么问题?我该如何解决这个问题?

【问题讨论】:

  • 你有演示页面吗?
  • 您应该更详细地描述问题,例如包含一些代码。无论如何,我会尽力回答它。尝试通过减小尺寸来优化图像。下次请包括浏览器、版本、操作系统、页面源代码等详细信息。
  • 您是否使用 javascript 对页面/图像进行任何处理,可以解释随着时间的推移性能受到的影响。需要更多信息。
  • 您是否在标记中指定图像的宽度和高度?浏览器是否必须进行任何计算才能将图像放入该空间(即图像的大小是否与标记所说的一样)?
  • @Pauly Dee 这太老了,但你还记得你是如何解决这个问题的吗?

标签: javascript html css image scroll


【解决方案1】:

尝试对 JQuery 使用 LazyLoad (link)。在您向下滚动之前它不会加载图像,非常适合您的用例。

【讨论】:

  • 我已经这样做了。导致问题的不是图像加载。这似乎是供稿中的图像数量之多。
  • 您可以尝试对结果进行分页以使它们不在一个页面上吗?
【解决方案2】:

您使用的图片有多大?您应该尝试使图像尺寸尽可能小。

您可以尝试在 JavaScript 中预加载图像(Image 对象)。这样,当用户向下滚动时,图像已经加载(或部分加载)。

【讨论】:

  • 没有一个很大。平均:300x400。这是尽可能小的。而且我已经确保图像已加载。似乎当页面上有大量图像(即使已加载)时,滚动变得不稳定。
【解决方案3】:

您的 javascript 中可能存在错误。 如果没有,您可以尝试在加载较旧的图片时删除最新的图片。

【讨论】:

  • 当使用 jQuery 时,.remove() 方法是否适用于这种情况?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-22
  • 1970-01-01
  • 2017-06-23
  • 1970-01-01
相关资源
最近更新 更多