图像太慢了，当文档加载完成时它们不会出现在页面上答案

【问题标题】：Images so slow they do not appear on page when document finishes loading图像太慢了，当文档加载完成时它们不会出现在页面上
【发布时间】：2016-09-26 17:34:26
【问题描述】：

目标：所有图片在首次加载时出现。

CURRENT：如果幸运的话，第一次加载时会出现两到三张图片；需要页面引用才能查看所有图像。

这是我的第一个网站，手写。客户是设计师，因此高质量的图像很重要。性能和速度对我来说很重要，因为它现在在我的投资组合中，我不能接受一个部分功能的网站作为我的工作。

这是一个示例页面：

http://elisamantovani.com/pages/book_design.html

也请查看其他页面。同样的问题。

更新：

许多人建议减小图像文件大小。无论如何，只有几张图片很大，但现在它们都很好。没有图像大于 200kb，大多数图像小于 100kb。问题仍然存在。

Google 建议阻止页面呈现的其他原因，例如呈现阻塞 JS/CSS。 CSS 应该在加载之前阻止渲染，但加载时间不应该太长。如果 jQuery 可以等到 HTML/CSS 呈现之后，我希望它。

刚刚进入缓存控制。将此添加到.htaccess 以稍微提高性能，但这只会在首次加载后帮助，但需要首次加载。

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

【问题讨论】：

虽然大部分文件都可以在网络上使用，但有一个文件高达 11mb
哥奇亚。没想到要检查背景图像。有趣的是，这总是要加载的。没有填充的是该标题照片下方的画廊图像。
检查代码中的错误并修复它们validator.w3.org/nu/…和jigsaw.w3.org/css-validator/…你的css链接要么不正确要么没有上传到你的服务器
您好，您可以将优化后的图像放在源文件夹中，这将减少从服务器获取图像的调用时间。
为我加载的图像。在不相关的说明中，我会将您的 js 包装在准备好的标准 jquery 文档中，并使用 CSS 而不是 m a n u a l 间距。 w3schools.com/cssref/pr_text_letter-spacing.asp

标签： html loading image-loading

【解决方案1】：

如果您想测量脚本/图像的加载速度，您可以做的很简单。

转到网络检查器（或右键单击一个元素并点击“检查元素”），然后单击名为“时间轴”的选项卡。现在重新加载您的页面。它可以让您衡量加载所有内容所需的时间。

在我的电脑上，您的网站需要 3.40 秒才能加载。还不错。你似乎很高兴。

附带说明，如果您的图像加载缓慢，则可能是图像而不是脚本。确保您返回并在 Photoshop 中重新压缩它们，以便它们具有最高质量/最小文件大小

这是截图

这是您今天加载时间的 SS。这似乎是托管问题。

【讨论】：

当您第一次访问该网站时，是否出现了所有图像？例如，在此页面上，应该有大约 12 个无需刷新即可显示。
我没有发现任何问题。我尝试了画廊页面。我的检查员将您的网页计时为 3.4，所以是的！还不错。
我访问时仍然遇到空载，许多其他用户也是如此。但很高兴听到有些人预先加载了所有图像 - 某些地方一定进展顺利。
尝试我建议的技术，它将帮助您诊断导致加载速度缓慢的原因
感谢您分享这项技术。使用它，我可以观察到图像确实加载（并且时间很好！） - 但它们不会出现在屏幕上。我一直在考虑做类似(document).load = ('img').reload() 的事情，但还没有找到一个好的方法。想法？

【解决方案2】：

在google insights 中运行 url 表明您必须将图像压缩和优化 >=60%

developers.google 有一篇很好的文章，您可能会发现它对您的下一个项目也很有用！

图片加载缓慢的原因有很多！

一些建议：

缩小和压缩 SVG 资源

首选矢量格式

选择最佳光栅图像格式

删除不必要的图像元数据

调整服务器上的图像大小，并确保“显示”大小尽可能接近图像的“自然”大小

投资于自动化工具和基础架构，以确保您的所有图像资产始终得到优化。

【讨论】：

【解决方案3】：

主要问题是图片的大小，您应该注意上传比网站实际需要大得多的图片。第一次加载会慢很多，因为图片不在浏览器缓存中...

如果您查看图像，您会看到：对于此页面，您需要300x279 的图像，并且您正在收取1281x1192 像素的 gif。然后，如果您查看时间，您的图像将在大约 6 秒内加载。这是真正的问题。所以调整图像大小，然后再试一次。如果你想清除浏览器缓存，Ctrl+F5。

有一些网络工具，例如http://quickthumbnail.com/，您可以在其中裁剪并调整图像大小，或者您可以使用一些图像编辑器（例如 Photoshop，...

【讨论】：

【解决方案4】：

我访问了您的网站，起初它运行良好。但是当我切换到另一个选项卡并返回您的网站时，它是空白的几秒钟，其背后的原因是您的背景图片 Tomorrow_final.jpeg 这是

11mb
size of 8454x8568

如此巨大。而您剩余的12 images 工作正常，因为它们都在kbs 中。因此，使用photoshop 减少您的background image size 并将其保存为web and device，然后它将正常工作。目前，即使您的网页在滚动速度过快时也会卡住。

【讨论】：

【解决方案5】：

最好使用 google 的 webP Codec，这是一种有损和无损压缩方法，可用于网络上的各种摄影、半透明和图形图像，有助于快速加载图像。

【讨论】：

【解决方案6】：

我可能建议配置 .htaccess 文件以进行缓存。它可能会提高速度。

使用类似的东西

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

【讨论】：

【解决方案7】：

对于图片的数量，您的网站应该更快。我建议您使用 Sprites 技术，该技术基本上是将所有图像收集到一个图像中。这样，网站只加载一次。

有一些在线精灵生成器可以让这个过程变得非常简单。例如，我使用这个http://css.spritegen.com/，效果很好，性能更好。

【讨论】：

感谢您提供此资源。出于本网站的目的，所有图片都必须分开，以便用户可以单击单个图片来放大它们。