img加载卡顿，解决办法

我觉得我在这个项目里遇到了太多的第一次。比如上一篇博文：在在360、UC等浏览器，img不加载原因。

当前情况是：图片加载缓慢，图片加载时出现卡顿。

上图：我缩放了图片，估计有点变形。能说明情况就行，粗糙点就粗糙点吧。

1.单张图片加载情况：

加载完：

2.banner图加载情况

情况说明

banner有3张图，加载的时候就分了三层。发现这个情况的时候，我表示自己很萌萌哒。

寻找原因及解决办法

1.图片css样式和轮播图js影响了图片的加载

初始情况下，我猜测是我的css样式没有写好，可能js轮播也有问题。但是我在本地服务器上访问的时候，一切很正常。于是我排除了写的js的问题。着重于检查css。

我使用图片本身属性‘width’、‘height’来写图片的宽高，并将规定图片宽高的css样式注释掉。清除浏览器缓存并刷新网页，图片加载卡顿的现象并没有改善。

目前，暂时排除掉这个原因。

原谅此时的我大写的懵逼脸

2.前端页面卡顿？或者DOM操作惹的祸，需优化代码。

这是我百度到的一篇文章。文章地址：http://developer.51cto.com/art/201504/473422.htm

由于有些图片比较大，我用js控制图片根据框的大小等比例缩放显示在框内。当然这个功能与banner无关，但是我还是担心是我js的影响。

于是我注释了这个js并清除掉浏览器缓存后，刷新页面，加载还是一样的慢，可见不是我这个js的锅。

3.图片过大，导致加载时间过长，以致出现图片加载出现卡顿的现象。

以上两个方法都没有找到问题的原因所在。我仔细看了页面图片的加载情况，请求数量不算多，但是每张图片请求成功加载出来花费的时间很长，有的甚至需要2、3s多。

我再去查看了淘宝、京东的图片加载情况，很快，都是毫秒，就没有上秒的。

我将淘宝的图片从banner到商品图，各下载几张，发现图片大小最大的也就只有几百K。

再看看我方官网上的图片，都是几M的，甚至有几十M的。

据此，我猜测是因为图片过大，导致加载时间过长，以致出现图片加载出现卡顿的现象。

由于图片已经上传到服务器，几千张图片，不可能让柜台工作人员重新上传。所以我从服务器上将图片下载到本地，进行手动压缩=-=

将几M甚至几十M的图片压缩到几百K后，我表示人生已经圆满了。将图片重新更新到服务器的时候，我想这下应该解决问题了吧！！

但也只是我想想，问题并没有被解决，页面在加载时，图片仍然卡顿！！

迎面一盆冰水浇过来的感觉，我已经不造说什么好。

4.采用图片预加载或图片分屏加载

采用以上两种方式，页面加载图片仍卡顿！！！

以上两种方式会单独说怎么操作。

5.本地缓存

仍然无用

6.UI保存图片方式错误。应该采用渐进式的JPEG

我和后端童鞋一起，从各自的方向挣扎了n天，尝试了n种方法，都没能解决这种情况。

于是各自求助经验比较丰富的人。

有个大神告诉我们，可能是UI保存图片的问题。大神从官网下载一张图片，处理过后发给我们，放上去后，问题完美解决！！撒花~~~

UI在保存图片的时候，要保存成渐进式的JPEG。

标准型jpg图片显示效果：

渐进式jpg显示效果：

以上两图来自文章：PhotoShop制作渐进式JPEG的方法。链接：http://www.jb51.net/photoshop/182198.html