Javascript 使图像加载更快HTML_Javascript_Jquery_Css_Html

Javascript 使图像加载更快HTML

javascript jquery css html

Javascript 使图像加载更快HTML,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我的网页结构如下： <html> <body> <div id="1"> <img>.....<img> </div> <div id="2"> <img>.....<img> </div> <div id="3"> <img>.....<img>

我的网页结构如下：

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

10mb对于单个网页来说是非常大的尺寸。。。我强烈建议你重新设计你的网页到多个

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

在ajax中，只需一次请求2或3个图像。。当图像完全加载时，只显示图像

编辑：尝试anton comment，与ajax一起使用也是个好主意。。

这是您的起点

因为您使用的是jQuery，我建议您使用。它使图像仅在视口中加载。

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

首先，对于单个网站来说，10MB的数据太多了（即使你是说MB的数据太多了）。第一步就是为网络优化图像。我过去用过的一个很棒的工具是雅虎s

在这样做之后，您将不得不考虑如何以只加载第一个（很少）图像的方式重构HTML，以便它们能够更快地加载（通过一次加载尽可能少的图像来节省带宽）。我建议您首先只加载用户打开页面时可见的图像。然后运行脚本以附加其他图像。如果要在加载第一个图像后运行该脚本，可以使用

您的html将如下所示：

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

$(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
});

...

还有一个jQuery文件，其内容如下：

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

$(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
});

$（窗口）。加载（函数（）{
$（“#2”）。附加（“”）；
$（“#3”）。附加（“”）；
//等等
});

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

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

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

下面是一个非常简单和粗糙的例子：

演示小提琴：

您维护一个包含所有图像URL和缓存状态的数组。首先，所有图像的缓存状态都将为false。然后，我们将为显示的每个图像启用它。（此时，我们假设图像将被缓存，但在某些情况下，图像可能不会被缓存）

接下来，为图像连接一个

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；
显示图像（0）；//立即在页面加载时初始显示第一个图像
$（“#nxt”）。在（“单击”，函数（）{
idx=（++idx%len）；显示图像（idx）；
});
$（#prv”）。在（“单击”，函数（）上{
idx=（idx+len-1）%len；显示图像（idx）；
});
$（“img”）。在（“加载”时，函数（）{showImage（$（this））；}）；//处理图像上的加载事件
函数显示图像（idx）{
var$currentImage=$（“#d”+（idx+1））.find（“img”）；
$currentImage.attr（'src'，images[idx].url）；//根据当前数组索引设置src
if（images[idx].isCached）{showImage（$currentImage）；}//如果已缓存，则显示
else{images[idx].isCached=true；}//如果未缓存，则让加载处理程序工作
}
函数showImage（$img）{
$（“img”）.removeClass（“show”）；$img.addClass（“show”）；//您的例程在这里
}

div{float:left；}