进入本篇教程的诸位都是一名正在努力前进的站长,所以大家都知道在jQuery插件中有一个lazyload插件是用来实现网站的图片懒加载功能的,这种图片懒加载模式对于那些图片较多的网站来说具有非常重要的意义,不仅能够提升网站页面的打开速度,也能增加用户体验与百度的亲和力(我们的汇码屋网站再过一段时间可能会加上这么一个图片懒加载功能,目前还用不到)!

研究过这个图片延迟加载插件的站长都知道,我们若是想要真正实现图片延迟加载,那么就必须将真实图片地址写在img标签中的data-original属性中,若src与data-original相同,则只是一个特效而已,并不达到延迟加载的功能!就如下面这段代码:
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480" alt="xxxxxx">
这段代码是一段标准的懒加载图片的代码,是没问题的,而小编发现有些网站在使用了图片懒加载插件之后,他的代码是这样的:
<img class="lazy" data-original="example.jpg" width="640" heigh="480">
在代码里并没有src属性,当然也谈不上img的alt属性了,这样做是非常不好的,只会导致百度无法识别你的图片,对百度蜘蛛的抓取造成了很大的干扰!
所以,如果我们需要在自己的站内做图片的懒加载,一定不要忘了img标签的src属性和alt属性的使用,其中src中的属性中的图片是一个占位符图片例如1×1像素的灰色图片),也可以是一个表示“正在加载中”的正常图片或gif(如loading的gif图片),而data-original属性中才是我们内容中的真正图片的地址!
1.本文部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
2.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
3.如果本站有侵犯、不妥之处的资源,请在网站最下方联系我们。将会第一时间解决!
4.本站所有内容均由互联网收集整理、网友分享,仅供大家参考、学习,不存在任何商业目的与商业用途。
5.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除!
