使用 50M 等高分辨率图片时，网页加载速度很慢

【问题标题】：the webpage loading is very slow when using some high-resolution image like 50M使用 50M 等高分辨率图片时，网页加载速度很慢
【发布时间】：2017-09-29 16:29:32
【问题描述】：

我设计一个网站。在某些网页中，我需要使用一些高分辨率的图像，例如 50M。代码如下：

 <ul class="demo-sample-list" >
    <li class="active">
        <img src='/static/images/0.png'>
    </li>
    <li >
        <img src='/static/images/1.png'>
    </li>
    <li >
        <img src='/static/images/2.png'>
    </li>
    ...
</ul>

但是这些网页加载速度很慢。如何解决这个问题呢？谁能给点建议？

【问题讨论】：

缩小图片
尝试优化您的图像.. 50mb 相当高
尤其是缩略图，它们最多应该在 kB 范围内，而不是 MB。最好在上传或创建它们时缩小它们。

标签： javascript css html

【解决方案1】：

如果你真的需要在网页上放这么大的图片，一个选项可能是在渲染 dom 之后用 jquery 或 javascript 加载图片。如果 dom/page 被渲染并且它只加载图像。加载时间会很快，即使他们可能需要等待最后一张大图。这是有关如何执行此操作的类似问题/答案。

https://stackoverflow.com/a/5402759/6497826

所以它可能看起来像这样：

HTML：

<div id="slider">
</div>

和你的脚本/jquery

$(document).ready(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

【讨论】：