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

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

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

研究过这个图片延迟加载插件的站长都知道,我们若是想要真正实现图片延迟加载,那么就必须将真实图片地址写在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属性中才是我们内容中的真正图片的地址!

本文由聚码屋整理自网络,如转载请注明出处:https://www.ym3.net/97.html

本站发布的内容若侵犯到您的权益,请邮件联系 cnzz8@outlook.com  删除,我们将及时处理!

本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。

本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。

若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。

发表评论

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

返回顶部