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

 

抱歉，此文章代码缺失，暂不可用。

 

什么是对搜索引擎友好的图片延迟加载？

即在不改变元素及其属性的标准写法基础上实现延迟加载

现状问题

目前几乎所有的图片延迟加载库都是使用的临时属性代替src属性实现的，这样有两个问题：

1. 对SEO不利。
2. 代码侵入。

 

 

实现目标

对SEO友好，支持原生src属性。
无侵入代码。仅引入一个js文件即可，程序自动处理。
高性能。高效处理图片，高频次事件节流，快速滚动图片忽略。

 

思路

一个页面加载监听器：劫获所有图片，放到队列中。
一个页面滚动监听器：当发生滚动时，将进入视口的图片放入待加载的队列中。
一个图片加载器：每隔一定时间执行一次，将滚动监听器检查出的待加载图片显示出来。

代码

硬盘损坏，代码丢失，要素回忆：

获取图片使用document.images

对scroll事件添加节流机制

对图片设置默认高宽度站位并显示背景颜色

快速滚动时不加载图片，只有当图片出现在视口中一定时间才加载

加载图片时将紧挨着的超出视口的图片也预加载

进入视口判定：判断图片顶边与body顶边的距离(img.offsetTop)，如果距离小于body可见区域高度(document.body.clientHeight)，说明图片已经进入视野