javascript 使图像加载速度更快 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27213745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making images load faster HTML
提问by Farveaz
The structure of my webpage is:
我的网页结构是：
<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>
All these divs are hidden in the beginning and based on navigation, these divs are shown one by one. There is a menu div which will control the hiding and displaying of other divs.
所有这些 div 都隐藏在开头，并根据导航将这些 div 一一显示。有一个菜单 div 将控制其他 div 的隐藏和显示。
When I uploaded the files on the server, I realized that in order for the website to load, all the images must load and the total image size is around 10MB. Hence the website load takes a lot of time. Is there an alternate way/hack to make webpage load faster?
当我将文件上传到服务器时，我意识到为了加载网站，必须加载所有图像，并且图像总大小约为 10MB。因此网站加载需要很多时间。有没有其他方法/技巧可以使网页加载速度更快？
Putting these images in different pages is not an alternate approach. I intend to make the website work using jQuery and CSS transitions. Please suggest a way in which I can make the webpage load faster.
将这些图像放在不同的页面中并不是一种替代方法。我打算使用 jQuery 和 CSS 转换使网站正常工作。请提出一种可以使网页加载速度更快的方法。
What approach do I use? One approach is to display a Loading gif until the website loads. What are the other alternatives?
我使用什么方法？一种方法是在网站加载之前显示加载 gif。还有哪些其他选择？
回答by sander
回答by www139
It is possible to compress an image. Images take the most data sometimes even MBs. To compress an image open it in preview (for example) on a Mac. Then go and adjust the width and height of the image. I'm not sure about the current width and height of your images though so if you can would you post that? Also see if you can get the page under 1mb you could accomplish that by compressing files (getting rid of white space) and compressing images. Also try loading some of the unimportant content with ajax after the rest of the page (with more important content) has loaded.
可以压缩图像。图像有时会占用最多的数据，甚至是 MB。要压缩图像，请在 Mac 上的预览（例如）中打开它。然后去调整图像的宽度和高度。我不确定你的图片当前的宽度和高度，所以如果你可以的话，你会发布吗？还要看看您是否可以将页面缩小到 1mb 以下，您可以通过压缩文件（去除空白）和压缩图像来实现这一点。还尝试在页面的其余部分（具有更重要的内容）加载后使用 ajax 加载一些不重要的内容。
回答by Bram Vanroy
First of all, 10 MB is way too much data for a single website (even if you meant Mb that would be quite a lot). A first step would be too optimise your images for the web. A great tool that I have used in the past is Yahoo!'s Smush.it.
首先，对于单个网站来说，10 MB 的数据量太大了（即使您的意思是 Mb 也会很多）。第一步是优化您的网络图像。我过去使用过的一个很棒的工具是 Yahoo! 的Smush.it。
After you've done that, you'll have to consider how you can restructure your HTML in such a way that only the first (few) image(s) are loaded so that they can be loaded more quickly (saving bandwidth by loading as few images as possible at a time).
完成此操作后，您必须考虑如何以仅加载第一张（少数）图像的方式重构 HTML，以便更快地加载它们（通过加载为节省带宽）一次尽可能少的图像）。
I suggest that you first only load the image that is visible when a user opens the page. Then run a script to append the other images. You want to run that script after your first image has been loaded, you can use window.loadfor that.
我建议您首先只加载用户打开页面时可见的图像。然后运行一个脚本来附加其他图像。您想在加载第一个图像后运行该脚本，您可以使用window.load。
Your html would then look like this:
您的 html 将如下所示：
<body>
<div id="1">
<img src="first-image.jpg" alt="First image">
</div>
<div id="2">
</div>
<div id="3">
</div>
...
</body>
And a jQuery file with something like this:
还有一个像这样的 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
});
回答by Abhitalks
Am assuming that by 10 MB you mean the total size of all images and you have several images. I would also assume that this isyour use-case (you might be purposefully showing high-res photos).
我假设 10 MB 是指所有图像的总大小，并且您有多个图像。我还假设这是您的用例（您可能有意展示高分辨率照片）。
All these divs are hidden in the beginning and based on navigation, these divs are shown one by one. There is a menu div which will control the hiding and displaying of other divs
所有这些 div 都隐藏在开头，并根据导航将这些 div 一一显示。有一个菜单 div 将控制其他 div 的隐藏和显示
If you have a fixed number of such images as shown in the question, then one method you could apply is to load each image as and when required. i.e. as per your menu option when a div is shown, at that time load the image. This way the first image will be loaded along with the page load, and the rest will be loaded on demand. You may show a "loading" indicator during that time. Also, note that you will need to load-on-demand only once for each image, which will then be cached for re-use.
如果您有固定数量的此类图像，如问题所示，那么您可以应用的一种方法是根据需要加载每个图像。即根据您的菜单选项，当显示一个 div 时，加载图像。这样，第一张图片将与页面加载一起加载，其余的将按需加载。在此期间，您可能会显示“正在加载”指示器。另请注意，您只需为每个图像按需加载一次，然后将其缓存以供重复使用。
Here is a very simple and crude example:
这是一个非常简单粗暴的例子：
Demo Fiddle: http://jsfiddle.net/abhitalks/rmx4so40/1/
演示小提琴：http: //jsfiddle.net/abhitalks/rmx4so40/1/
You maintain an array holding all your image urls and cached state. Inititally, the cached state will be false for all images. We will then turn it on for every image we show. (At this point we are assuming that the images will be cached, there are scenarios where images may not be cached).
您维护一个包含所有图像 url 和缓存状态的数组。最初，所有图像的缓存状态将为假。然后，我们将为我们显示的每个图像打开它。（此时我们假设图片会被缓存，有些场景可能不会缓存图片）。
Next, wire up a loadevent handler for images and put in your code to systemically show the current images and hide other, if required.
接下来，load为图像连接一个事件处理程序并放入您的代码以系统地显示当前图像并在需要时隐藏其他图像。
On your menu click, check the array if cached flag is on. If not, let the loadevent handler take care. If yes, show the image right away.
在您的菜单上单击，如果缓存标志打开，请检查阵列。如果没有，让load事件处理程序处理。如果是，请立即显示图像。
Sample Snippet:
示例片段：
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">< Previous</button><button id="nxt">Next ></button>
<hr />
<div id="d1"><img /></div>
<div id="d2"><img /></div>
<div id="d3"><img /></div>
<div id="d4"><img /></div>回答by vinrav
10mb is very large size for single webpage... I strongly recommend you to redesign your page into multiple...
10mb 对于单个网页来说是非常大的尺寸...我强烈建议您将页面重新设计为多个...
If you want to stick to your current structure, then use ajax... it wont speed up the page load... but it makes you to feel like page loaded with speed...
如果你想坚持你当前的结构，那么使用ajax......它不会加快页面加载......但它让你感觉页面加载速度......
In your ajax, simply request for 2 or 3 images at a time.. and when the image is fully loaded, then only show the image...
在您的 ajax 中，只需一次请求 2 或 3 张图像......当图像完全加载时，只显示图像......
EDIT:try anton comment it is also good idea along with ajax.. Here is your starting point https://developers.google.com/speed/pagespeed/module/filter-image-optimize
编辑：尝试 anton 评论它与 ajax 一起也是个好主意..这是你的起点https://developers.google.com/speed/pagespeed/module/filter-image-optimize
