图片过大加载慢?而不是图片太多加载慢?

首先要尽可能的压缩,看用户的忍受程度。jpg 可以用很多方法压缩,png 推荐使用 TinyPNG

工具(不过正文图片,显然要选择 jpg 格式的)。

然后

1,不太“在乎”用户体验的省事方法:

图片保存成渐进式的,加载会慢慢变清晰,而不是从上往下依次加载,然后放在 CDN,设置缓存之类。

2,比较“在乎”用户体验的高端方案:

判断用户的设备(主要用在移动端)、网络等,分别加载不同质量的图片(例如高端 iPhone wifi 情况下,就可以加载双倍高清图等,蜂窝网络下面,就加载个单倍或者有损压缩过的)。

或者先加载低质量的图片,让浏览者可以看到,然后再在后台加载更高清的,等加载完了,浏览者还在观看,就插入替换掉。

或者先加载低质量小图片列表,然后让用户点击,触发类似 fancybox 的效果,弹窗出现大图片。

或者利用资源预加载(三个 HTML5 不常见特性简介)当用户还没打开的时候,就开始加载。

还有好多思路,后面想到再补充。

方案2 具体实施
直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉

高清无码的图片随便怎么命名,但是压缩过的命名有要求,那就是必须在原图的名称前面加上相同的便于分辨的标识。比如

高清图1命名为wozuishuai.jpg 那么相应的压缩图就叫wozuishuai_min.jpg (_min这个随你取名,但是要一致,不能一个叫_min,下一个就成了_small)

然后,高清图在网页上都不用,用压缩过的图。比如这样子
v2-db160894cc6f6cb4ccd38342ca693d96_r.jpg
这样子,你打开网页的速度就会快很多,但是图片会失真,虽然有的时候不影响使用,但是会影响用户的体验,以及老板拍桌子骂你干什么吃的?

不用怕,可以用下面这段代码来解决这个问题,这个是基于jq的,要先引入jq

<script>
$(function(){
    //一段正则,匹配所有_min.的图片src属性
    var test = /_min\./
    //遍历所有的图片节点
    $("img").each(function(index,obj){    
        if(test.test($(this).attr("src"))){
            var reSrc = $(this).attr("src").replace(test,".");
            $(this).attr("src",reSrc)
        }        
    })
})
</script>

最后我们用一张图来测试下这个方法的可行性
v2-2dccb745bc4d7e69b8926db1ff6137bd_720w.jpg

其实不用1s,这些图基本上都可以用了,都可以看了,只不过我们这个是东郭先生,滥竽充数,但是最起码能知道图片讲的什么内容。但是,如果只加载高清图,那么,用户势必要等待好几s甚至十几s。这样的话,用户是很容易抛弃这个网站的。

下面我会更详细的从头到尾将这个小方法讲一遍