为什么手机上传图片这么慢 前端_网站如何解决图片过大加载慢的问题？

直接一开始用压缩过的体积小的图，等加载完毕后，再用高清无码图来替换掉

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

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

然后，高清图在网页上都不用，用压缩过的图。比如这样子

这样子，你打开网页的速度就会快很多，但是图片会失真，虽然有的时候不影响使用，但是会影响用户的体验，以及老板拍桌子骂你干什么吃的？

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

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

}

})

})

最后我们用一张图来测试下这个方法的可行性

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

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

首先，给你看两张图

图1大小484KB

图2大小63KB

图1 大小484KB，图2大小63KB，可能这样子看不出来图1和图2的质量相差特别大，那我再换一组

图3大小1.15M 1920*1080

图4 大小51.4KB，1000*563 这是我自己缩小，且降低画质之后的(ps很简单就可以实现这功能)

那么，在实际的网页中，高清图和自己压缩过的图会是怎样的呢？

我将这四张图，放在一个测试页中，然后上传到自己的云主机上

再用谷歌打开

你会发现，压缩过的加载超快(这是废话)，而且，质量差的图片你也能看清楚它的内容是什么

不过，当图片被拉大的时候，会产生失真

图7不知道你们能不能看出来，反正我在自己的测试页里面看是很明显失真了，但是自己还是能看清楚里面的内容，不过并非一开始的高清、无码.μs。所以，我们可以在网页刚开始加载的时候，挂上压缩过的图片。将图片命名为xxxx_min.jpg 前面的xxxx和后面的后缀名必须和原图一模一样

通过上面的小实验我们知道了，压缩过的图片(随便你压缩图片质量也好，图片大小也罢)，体积更小，加载更快。但是会有失真问题。

图片失真，问题可大可小，但是身为一个前端，你是直接和用户体验挂钩的，你所做的东西，在用户心里所占的比重很大(这里不是说后台的不重要，只是后台的兄弟们做的性能优化什么的，给了用户很好的体验，但是用户并不觉得你有什么付出，用户一般只会觉得，嗯，今天网速不错)，所以，我们要尽可能的严格要求自己。

那么接下来就很简单了，只需要一段js

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

}

})

})

几乎没啥兼容性问题，只不过在火狐浏览器里面，当高清图加载完毕之后，压缩图会先消失变白，最后再变成高清图，就好像闪了一下一样，另外测试的时候，发现，IE7、8都可以。IE9加载不出来后面高清图，我想，我可能是用了假的IEtest，另外，我想问一下各位大神，有没有什么办法能优化背景图的加载？