访问网页访问的时候出现这张图，怎么解决？

来源：蜘蛛抓取(WebSpider) 时间：2018-10-26 17:32 标签： 网页访问

1、使用响应式图片响应式图片的優点是浏览器能够根据屏幕的大小设备像素比ppi、横竖屏自动加载合适的图片，如使用srcset： 

 

 屏幕的ppi=1加载1倍的图ppi=2加载2倍图，手机和mac基本上ppi都達到2以上这样对于普通屏幕不会浪费流量，对于视网膜又有高清的体验如果不支持srcset，就默认加载src的图
 
 

 mac上回先加载srcset，后加载src加载两張图，解决方法
 
 

 （1）而使用picture就不会加载两张：
 
 

 （2）js 判断
picture必须要写img标签否则无法显示
 
 

 图片格式兼容处理：
webp在保持同等清晰度的情况下，体積可以减少一半但是目前只有Chrome支持，Safari和firefox一直处于实验阶段所以其它的浏览器如firefox将会加载jpg格式的照片：
 
 

 2、延迟加载图片
许多网站，图片往往是占据最多流量和带宽的的资源特别是那种瀑布式展示性的网站，几十张图片如果一口气全部放出来，那么页面的Loaded时间将会较长并且由于并行加载资源数是有限，图片太多会导致放body后面的js解析比较慢页面将较长时间处于不可交互状态。
 
 

 所以不能一下子把全部图爿都放出来这对于手机上的流量也是不利的。
 
 

 解决方法：
懒惰加载图片：初始不加载图片只当用户下滑到相应位置时候才放图片出来。
（1）初始是不把图片放在src而是放在data里面，
 
 

 （2）监听scroll事件回调函数
第5行for循环，依次对所有的图片做处理第8行的if判断，如果滑动的位置快要到那张图片了则把src放出来，这个位置差默认为500px如果图片加载得快的话，这种行为对于用户来说是透明的他可能不知道图片是往下滑的时候才放出来的，几乎不会影响体验如果用户滑得很快，本身不做这样的处理也不可能加载得这么快，也是loading的状态
 
 //如果快偠滑到图片的位置了
 

 （3）下面的函数把图片放出来
代码里面判断src是不是有”//”，即为正常的地址如果没有给它赋值，触发浏览器加载图爿
 
 

 并记录已经放出来的个数，这样可以做个优化当图片全部都加载或者开始加载了，把scroll事件取消掉：
 
 

 这样可以大大减少打开页面的流量加快ready和load的时间。

咱们设置的仅仅是发送的http头主求嘚参数还有一个用于浏览器解析的重要参数便是OSS的API文档里的“返回http头” 这就是决定浏览器的下载行为的参数。。

我要回帖

更多关于 网页访问 的文章

 

随机推荐