【互联网笔记】02 LazyLoad是什么

相信程序猿哥哥看到lazyload这个词一定不陌生。在做站内SEO诊断的时候，发现移动图片站点全部是采用lazyload，此前在百度站长平台看到过相关的介绍，有提到谨慎使用lazyload，还有一些SEOER从业人员说过目前百度并不能很好的识别lazyload，会导致页面不被抓取到，最终影响到收录。

那么lazyload到底是什么，采用lazyload对SEO又有什么影响。让我有限的经验尝试着来解答一下，如果有程序猿哥哥在，请多多指教，多多补充。

lazyload

首先，引用一段网摘——

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.

如果你和我一样也是技术新手，那么，对于这句引用，只需要注意这个词——延时加载。借用某程序猿的解释，帮助理解：

Lazyload（懒加载）就是一个力量用在刀刃上的问题。如果没有用懒加载，图片会全部加载，页面底下不滚动看不到的图也加载，这样就造成浪费。懒加载就是你页面看到哪，图片就加载到哪里，就像吃自助餐一样你吃多少，打多少。就不会如普通套餐一下子装满，吃不完就造成食物的浪费。

PS：某宝就是采用lazyload的方式，建议可以上某宝体验一下，估计也就懂了。此前浏览过pinterest时，猜想也是用lazyload实现的，特地上网查看了下pinterest的方式，发现的确如此，并截了张图，供大家参考。

pinterest lazyload

通过上面的解释，我们可以知道使用lazyload有这样的好处：

通过延迟加载来实现按需加载，达到节省资源，加快浏览速度，从而提升用户浏览体验。

那么作为SEO从业人员应如何处理lazyload对SEO所带来的不友好性呢？且听我说~

情况一：没有用lazyload，在代码中看到的是这样

点评：这种情况对搜索引擎友好，但对用户体验不好，如果图片多的情况下，等待的时间会比较久。

情况二：使用了lazyload，在代码中看到的是这样

点评：这种情况对用户体验好，但对搜索引擎不友好，虽然有使用noscript将图片的实际Url放出来，但据一些站长反馈，目前仅有谷歌以及雅虎的蜘蛛能识别，百度蜘蛛能识别但不一定会处理（影响因素有页面权重、页面质量等等）。

情况三：那么既要提升用户体验，又要提升搜索引擎友好度，具体应该怎么做呢？听朋友牛牛的介绍，可以这样操作：
src上，还是写上正常的img地址，然后在浏览器加载的时候，把js写在头部，js会先执行，js替换src为替换图片。当鼠标滚过去的时候，再换回来。以下这一段为JS写法的参考，不同网站有所不同：$(".block").find("img").lazyload({effect : "fadeIn", threshold : 32 ,placeholder : "/images/lazyload1.gif"});
补充：原始图片（要给用户看的图片），起个名字：orgImg临时屏蔽图片（先替换掉，等鼠标滚过去再换回来），起个名字：preImg。
把js放在前部，src="orgImg" ，正常写就可以浏览器载入的时候，dom会替代成src="preImg" data-original="orgImg"然后当鼠标滚过去的时候，再变回：src="orgImg"
ps：后面这段代码的写法，不同网站情况会有所不同，如果你不懂技术，在与前端沟通时，可以直接告诉前端，真实图片url在不替换的情况下，实现lazyload。

针对情况三，特地又找程序猿哥哥解释了一番：使用情况三，相当于在情况二的基础上增加了一步。

不处理之前的lazyload方式，相当于，先看默认图---->大图。（并且src中放的url是缩略图，看完后再是原始图片，这样有可能造成蜘蛛抓取不到）
处理之后的lazyload方式，相当于，用JS先加载好，实现 先看大图--->默认图--->大图（src，直接用原始图Url即可）

理论上，如此操作可解决lazyload给SEO带来的潜在不友好性与风险。那么，实际情况如何呢？且听下回结合实例分解。