火桔源码-专注于分享优质精品源码的资源社区

图片延时加载优化中的data-original标签需要加alt属性吗?

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

研究过这个图片延迟加载插件的站长都知道,我们若是想要真正实现图片延迟加载,那么就必须将真实图片地址写在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中的属性中的图片是一个占位符图片例如1x1像素的灰色图片),也可以是一个表示“正在加载中”的正常图片或gif(如loading的gif图片),而data-original属性中才是我们内容中的真正图片的地址!

发表评论

还没有评论,快来说点什么吧~

联系客服
返回顶部