Question

我的网页结构是：

<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。还有其他选择吗？

Answer 1

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

Answer 2

可以压缩图像。图像占用的数据有时甚至是MB。要压缩图像，请在Mac上预览（例如）。然后去调整图像的宽度和高度。我不确定你图像的当前宽度和高度，如果可以，你会发布吗？另外，看看你是否可以通过压缩文件（摆脱空白区域）和压缩图像来获得1mb以下的页面。在页面的其余部分（包含更重要的内容）加载后，还尝试使用ajax加载一些不重要的内容。

Answer 3

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

Answer 4

单个网页的大小非常大......我强烈建议您将页面重新设计为多个...

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

在你的ajax中，一次只需要2或3张图像..当图像满载时，只显示图像......

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

Answer 5

首先，对于一个网站来说，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
});

Answer 6

我假设你所说的10 MB是所有图像的总大小，而且你有几张图像。我还假设这个是你的用例（你可能有目的地展示高分辨率的照片）。

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

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

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

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

您维护一个包含所有图片网址和缓存状态的数组。最初，所有图像的缓存状态都为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>

使图像加载更快的HTML

6 个答案: