【问题标题】:HTML : load thumbnail image and full image fasterHTML:更快地加载缩略图和完整图像
【发布时间】:2017-04-16 13:32:10
【问题描述】:

我有一个加载图像缓慢的博客网站我想知道如何让它们加载得更快并且:

  • 我对缩略图和故事使用相同的图像。缩略图很小,它仍然加载完整的图像吗?如果是如何使用图像的缩略图?
  • 我应该将图像存储在哪里?为您的网站和博客存储图像的最佳位置是什么?可以将它们保存在一个驱动器中并使用源吗?
  • 如何优化图像?什么是占位符?我见过很多网站,例如 facebook,使用一种在图像和内容之前显示的占位符?怎么做? - 我如何预加载图像?还是有更好的办法?

【问题讨论】:

  • 太多的问题和基于意见的...谁赞成这个?

标签: javascript jquery html css mysql


【解决方案1】:

这里有一些提示。

  • 缩略图图像必须与原始(大)图像分开。当用户上传图像时,您必须使用一些脚本来调整图像大小。如果您使用的是 Drupal 或 Wordpress 等标准 CMS,则应该有一个选项可以调整大小(无需编写代码)。
  • 假设您的博客是公开的,那么图像也应该是公开的(通常)。您可以创建一个名为 files 的目录,并将图像存储在该目录中。如果您使用的是标准 CMS,这些选项应该以某种形式存在。
    • 为避免从长远来看将所有文件都放在一个目录中,请使用文件夹命名方案,如 files/[YEAR]/[MONTH] 或您认为可以满足您的目的的任何其他名称。
    • 确保使用和.htaccess(或等效项)对上传目录和您的上传机制进行良好保护。否则,有人可能会上传恶意脚本并在您的服务器上执行它们。
  • 占位符是在原始事物不存在(或正在加载)时占据某事物位置的任何事物。因此,占位符图像将是具有通用设计的标准图像 - 就像说 正在加载一样好。您可以使用 JavaScript 或 CSS(背景图像)来实现这样的占位符。
    • 就我从您的问题来看,应该不需要预加载。如果您分享指向您网站的链接,可能会得到更好的意见/答案。

下一次,请尝试提出详细的问题 - 如果可能,每个问题一个问题。另外,不要害怕谷歌寻求解决方案。我通过谷歌搜索学习了编程(PHP、JS、Drupal、CodeIgniter 等)!希望这可以帮助!

【讨论】:

    【解决方案2】:

    Jigar 在回答这个问题方面做得相当好,不过我想我会补充一下,如果你想优化图像,有很多网站可以免费为你做。

    我最喜欢的是https://tinyjpg.com/,但还有很多其他的。快速的 Google 搜索可以让您找到许多不同的网站,它们都在做基本相同的事情。

    这篇文章也可能对Load a low-res background image first, then a high-res one有帮助

    【讨论】:

      猜你喜欢
      • 2013-05-24
      • 2013-04-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-04-29
      • 2015-01-28
      • 2016-03-01
      • 1970-01-01
      相关资源
      最近更新 更多