最近在给一家图片站企业做内部优化,发现网站上出现data-original标签,无法给图片进行标签优化,觉得很可惜,因为毕竟图片是他们公司安身立命的主要手段。所以,建议他把这个标签改成src,便于搜索引擎更好的爬行抓取图片内容,提升图片的收录几率。那么这两个标签到底有啥区别呢?我们一起看下案例。
案例说明:
代码1:<img alt="高科技电子信息"src="/Upload/20160331155051YgmU.jpg" style="width:750px;height:610px;"/>
代码2:<img alt="电子信息技术" data-original="/Upload/20160331155051YgmU.jpg" style="width:750px;height:1423px;"/>
解答:
data-original 标签,基于jQuery的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
注意事项:
需要真正实现图片延迟加载,必须将真实图片地址写在data-original属性中。若src与data-original相同,则只是一个特效而已,并不达到延迟加载的功能。
使用方法:
载入JavaScript文件
<scriptsrc="jquery.js"></script>
<scriptsrc="jquery.lazyload.js"></script>
修改HTML代码中需要延迟加载的IMG标签:
<!--
将真实图片地址写在data-original属性中,而src属性中的图片换成占位符的图片(例如1x1像素的灰色图片或者loading的gif图片)
添加class="lazy"用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的jQuery选择器
添加width和height属性有助于在图片未加载时占满所需要的空间
-->
<imgclass="lazy"src="grey.gif"data-original="example.jpg"width="640"heigh="480">
调用LazyLoad
$('img.lazy').lazyload();