使图像加载更快的 HTML答案

【问题标题】：Making images load faster HTML使图像加载更快的 HTML
【发布时间】：2015-01-28 14:15:07
【问题描述】：

我的网页结构是：

<html>
<body>
    <div id="1">
        <img>.....<img>
    </div>
    <div id="2">
        <img>.....<img>
    </div>
    <div id="3">
        <img>.....<img>
    </div>
    <div id="4">
        <img>.....<img>
    </div>
</body>
</html>

所有这些 div 在开始时都是隐藏的，并且基于导航，这些 div 会被一一显示。有一个菜单 div 可以控制其他 div 的隐藏和显示。

当我将文件上传到服务器时，我意识到为了加载网站，必须加载所有图像，并且总图像大小约为 10MB。因此，网站加载需要大量时间。是否有其他方法/hack 可以加快网页加载速度？

将这些图像放在不同的页面中并不是一种替代方法。我打算使用 jQuery 和 CSS 过渡使网站正常工作。请提出一种可以加快网页加载速度的方法。

我使用什么方法？一种方法是在网站加载之前显示加载 gif。还有什么其他选择？

【问题讨论】：

开始加载低质量图片，当页面加载完毕后，开始加载高质量图片。

标签： javascript jquery css html

【解决方案1】：

10mb 对于单个网页来说非常大...我强烈建议您将页面重新设计为多个...

如果你想坚持你当前的结构，那么使用 ajax...它不会加快页面加载速度...但它会让您感觉页面加载速度很快...

在您的 ajax 中，一次只需请求 2 或 3 张图像......当图像完全加载时，只显示图像......

编辑：尝试 anton 评论，与 ajax 一起使用也是个好主意。这是您的起点https://developers.google.com/speed/pagespeed/module/filter-image-optimize

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，我建议您使用 lazyload。它会导致图像仅在视口中加载。

【讨论】：

【解决方案3】：

可以压缩图像。图像有时会占用最多的数据，甚至是 MB。要压缩图像，请在 Mac 上以预览（例如）打开它。然后去调整图像的宽度和高度。我不确定您的图像当前的宽度和高度，所以如果可以的话，您会发布吗？另请查看是否可以使页面小于 1mb，您可以通过压缩文件（摆脱空白）和压缩图像来实现这一点。在页面的其余部分（包含更重要的内容）加载后，也可以尝试使用 ajax 加载一些不重要的内容。

【讨论】：

图片大约为 667x307 像素。但是，压缩它会降低质量，是吗？这是一个图片库组合。降低图像质量不是一个好选择！
没错，但质量损失会比永远加载要好。想象一下在手机上 - 10mbs！你用这些图片做什么？
是摄影师的作品集！我尝试降低图像质量并使用压缩的 png。它从 10 mb 下降到 3 mb，但仍然无法以我想要的速度运行。
嗯？这通常对我有帮助。仍然 3mb 是很多数据。看看你能不能把它降得更多。

【解决方案4】：

首先，对于单个网站来说，10 MB 的数据量太大了（即使您的意思是 Mb 也会很多）。第一步是为网络优化您的图像。我过去使用过的一个很棒的工具是 Yahoo! 的 Smush.it。

完成此操作后，您必须考虑如何重组 HTML，以便仅加载第一个（少数）图像，以便更快地加载它们（节省带宽一次加载尽可能少的图像）。

我建议您首先仅加载用户打开页面时可见的图像。然后运行一个脚本来附加其他图像。您想在加载第一张图片后运行该脚本，您可以使用window.load。

您的 html 将如下所示：

<body>
  <div id="1">
    <img src="first-image.jpg" alt="First image">
  </div>
  <div id="2">
  </div>
  <div id="3">
  </div>
  ...
</body>

还有一个类似这样的 jQuery 文件：

$(window).load(function () {
    $("#2").append('<img src="second-image.jpg" alt="Second image">');
    $("#3").append('<img src="third-image.jpg" alt="Third image">');
    // and so on
});

【讨论】：

当我使用加载后的图像ID时它会起作用吗？比如 $('#imageID).load(function(){ //加载图片 });
@Farveaz 是的，这应该可以工作，尽管可能不是跨浏览器/缓存图像。查看the docs 了解更多信息。

【解决方案5】：

我假设 10 MB 是指所有图像的总大小，并且您有多个图像。我还假设这是您的用例（您可能故意显示高分辨率照片）。

所有这些 div 都隐藏在开头并基于导航，这些 div 会一一显示。有一个菜单 div 将控制其他div的隐藏和显示

如果您有问题中所示的固定数量的此类图像，那么您可以应用的一种方法是在需要时加载每个图像。即，当显示 div 时，根据您的菜单选项，然后加载图像。这样，第一个图像将与页面加载一起加载，其余的将按需加载。在此期间，您可能会显示“加载”指示器。另外请注意，您只需为每个图像按需加载一次，然后将其缓存以供重复使用。

这是一个非常简单粗暴的例子：

演示小提琴：http://jsfiddle.net/abhitalks/rmx4so40/1/

您维护一个包含所有图像 url 和缓存状态的数组。最初，所有图像的缓存状态都是错误的。然后，我们将为我们展示的每张图片打开它。（此时我们假设图片会被缓存，有些场景可能不会缓存图片）。

接下来，为图像连接一个load 事件处理程序并放入您的代码以系统地显示当前图像并在需要时隐藏其他图像。

在您的菜单上单击，检查缓存标志是否打开。如果没有，让load 事件处理程序负责。如果是，请立即显示图像。

示例片段：

var images = [{'url': 'http://lorempixel.com/320/320', 'isCached': false }, 
              {'url': 'http://lorempixel.com/321/321', 'isCached': false }, 
              {'url': 'http://lorempixel.com/322/322', 'isCached': false }, 
              {'url': 'http://lorempixel.com/323/323', 'isCached': false } 
              ],
    idx = 0, len = images.length;

displayImage(0); // intitially display first image on page load right away
$("#nxt").on("click", function() {
    idx = (++idx % len); displayImage(idx);    
});
$("#prv").on("click", function() {
    idx = (idx + len - 1) % len; displayImage(idx);    
});
$("img").on("load", function() { showImage($(this)); }); // handle load event on image

function displayImage(idx) {
    var $currentImage = $("#d" + (idx + 1)).find("img");
    $currentImage.attr('src', images[idx].url); // set the src from current array index
    if (images[idx].isCached) { showImage($currentImage); } // if cached, show
    else { images[idx].isCached = true; } // if not cached, let load handler work
}

function showImage($img) {
    $("img").removeClass("show"); $img.addClass("show"); // your routine here
}

div {  float: left; }
img {
    width: 0; opacity: 0;
    transition: width 100ms, opacity 1s 250ms;
}
img.show { width: auto; opacity: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prv">&lt; Previous</button><button id="nxt">Next &gt;</button>
<hr />
<div id="d1"><img /></div>
<div id="d2"><img /></div>
<div id="d3"><img /></div>
<div id="d4"><img /></div>

【讨论】：

【解决方案6】：

您应该始终使用小尺寸的图片，以便更快地加载您的网络。您可以尝试https://tinypng.com/（或https://tinyjpg.com/）来减小图像的大小而不会降低它们的质量，从而减少加载时间。

【讨论】：