对搜索引擎友好的图片延迟加载技术

Posted 2020-10-01 jsper

先写一个思路，以后再贴代码。

在大数据时代，网站内容越来越丰富，图片数量越来越多，质量也越来越高。这意味着更加耗用带宽、流量。

如果一个页面有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即可。