先写一个思路,以后再贴代码。
在大数据时代,网站内容越来越丰富,图片数量越来越多,质量也越来越高。这意味着更加耗用带宽、流量。
如果一个页面有100张高清图片,比如游记,在不考虑延迟加载情况下,浏览器会在极短的时间内向服务器发起100个图片下载请求,但实际上用户并不需要短时间内看完100张图片,甚至用户有可能只看前面几张图片,那么这时不管对服务器来说还是对网络来说,还是对用户机器来说都会高负荷的运转起来,将极大的浪费资源。
因此,按需加载、延迟加载才能提供好的用户体验。
那么,延迟加载具体是怎样一个表现,简单的说就是用户打开一个图片较多的网页,如果网页有滚动条,那么浏览器将只加载用户视野范围内浏览器区域的图片,滚动条以下的图片不会自动加载,只有当用户拖动滚动条时,图片出现在浏览器显示区域时才执行加载。
目前有很多第三方的图片延迟加载js库,都能实现图片延迟加载效果。但是,大多数延迟加载js库的技术原理对搜索引擎并不友好,我今天要说的正是如何既实现延迟加载,又满足对搜索引擎友好的方法。
先说一下什么是对搜索引擎友好。搜索引擎在抓取网页内容,获取图片资源时,一般都是直接解析页面HTML源码,从中获取<img>标签,读取src属性。如果网页用的延迟加载js库不直接设置图片的src属性(通常是设置到一个自定义属性上,然后再需要时在赋给src),那么搜索引擎就无法获取到图片资源,从而影响对页面的评级和收录。
要做到既实现延迟加载,又满足对搜索引擎友好,意味着必须显示写明img标签的src属性,然后在浏览器读取src属性前去除src值,使浏览器在页面加载后不请求图片,再在条件满足时在重新为src赋值,使浏览器发起请求。
具体实现思路:
页面创建<img>标签时按正常用法即可,在html文档的末尾,</html>前写javascript代码,遍历页面中所有<img>标签,为img自定义一个临时属性,将src值赋给这个临时属性(暂且叫偷梁换柱),然后将src清空。这样,浏览器加载完页面,也不会请求图片了。因为浏览器会逐行初始化HTML标签,遇到script时也会立即执行,在初始化</html>后才会确定并请求最终要加载的资源
除了“偷梁换柱”,还要给滚动条添加监听事件,当发生滚动且停止时,判断图片顶边与body顶边的距离(img.offsetTop),如果距离小于body可见区域高度(document.body.clientHeight),说明图片已经进入视野,此时既需要浏览器加载图片,此时再将之前自定义的临时属性的值重新赋值给src即可。