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

Posted jsper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对搜索引擎友好的图片延迟加载技术相关的知识,希望对你有一定的参考价值。

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

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

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

以上是关于对搜索引擎友好的图片延迟加载技术的主要内容,如果未能解决你的问题,请参考以下文章

jquery图片延迟加载 及 serializeArrayserialize用法记录

图片延迟加载库Layzr

图片懒加载(延迟加载)原理及实现

JS图片预加载插件

Jquery 图片延迟加载技术

图片延迟加载