img加载卡顿,解决办法

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

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

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

1.单张图片加载情况:

img加载卡顿,解决办法

加载完:

img加载卡顿,解决办法

2.banner图加载情况

img加载卡顿,解决办法

情况说明

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

寻找原因及解决办法

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

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

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

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

原谅此时的我大写的懵逼脸img加载卡顿,解决办法

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后,我表示人生已经圆满了。将图片重新更新到服务器的时候,我想这下应该解决问题了吧!!

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

img加载卡顿,解决办法迎面一盆冰水浇过来的感觉,我已经不造说什么好。

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

采用以上两种方式,页面加载图片仍卡顿!!!img加载卡顿,解决办法

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

5.本地缓存

仍然无用

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

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

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

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

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

标准型jpg图片显示效果:

img加载卡顿,解决办法

渐进式jpg显示效果:

img加载卡顿,解决办法

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

上一篇:(转)Eclipse 下找不到或无法加载主类的解决办法


下一篇:【Jquery+Express.js】 submit() 方法提交form