使图像加载速度更快 HTML

Making images load faster HTML

本文关键字：HTML 速度 图像 加载      更新时间：2023-09-26

我的网页的结构是：

<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。因此，网站加载需要大量时间。有没有其他方法/黑客可以使网页加载更快？

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

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

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

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

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

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

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

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

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

首先，10 MB 对于单个网站来说太多了（即使你的意思是 Mb，那也会很多）。第一步是针对网络优化您的图像。我过去使用过的一个很棒的工具是雅虎的 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
});

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

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

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

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

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

您维护一个包含所有图像 URL 和缓存状态的数组。最初，所有图像的缓存状态将为 false。然后，我们将为我们显示的每张图像打开它。（此时我们假设图像将被缓存，在某些情况下可能无法缓存图像）。

接下来，为图像连接一个 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>

相关文章：