图片大加载慢

图片network:








相关知识点:

默认图片相关:

a.background:利用背景图设置默认图片,其中可以连这写的是background-image,background-position,background-repeat,这些也是要加倍写的。


图片大加载慢_第1张图片


图片大加载慢_第2张图片
aa是夜景图

参考链接:http://www.haorooms.com/post/css3_bg_multi

b.img标签的onerror事件,当图片加载不出来时使用默认图片加载---并不是解决大图片的问题,只是解决默认图片的问题;图片加载很慢是不一定会执行onerror的,超时应该会执行onerror,超时原因我不确定会是啥,超时时间怎么设置不清楚额,是浏览器设置还是服务端设置,还是计算机设置;

http://blog.csdn.net/cs41806516/article/details/52206513

大图片优化方法:

1.图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。


图片大加载慢_第3张图片

*screen:屏幕大小,不管窗体的缩大放小的,还有宽度算不算滚动条的宽度,看滚动条是不是body的,其实都没去设置overflow的时候,很可能默认是html的;

图片大加载慢_第4张图片

参考:https://www.jianshu.com/p/4f6ea540516a

https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000


2.如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。


参考链接:http://blog.csdn.net/sunshine940326/article/details/53536535?locationNum=3&fps=1


3.如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。


图片大加载慢_第5张图片

参考链接:http://imgbase64.duoshitong.com/


4.如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。


图片大加载慢_第6张图片


图片大加载慢_第7张图片


图片大加载慢_第8张图片

                参考链接:http://blog.jobbole.com/44038/#article-comment

5.如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。



判断图片加载是否加载完成:onload,readystatechange,complete属性

参考链接:http://blog.csdn.net/zhuchunyan_aijia/article/details/52016962

你可能感兴趣的:(图片大加载慢)