我觉得我在这个项目里遇到了太多的第一次。比如上一篇博文:在在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