data-original标签如何优化?需要加alt标签么?

2019-11-28 16:45:36  阅读 218 次 评论 0 条

   最近在给一家图片站企业做内部优化,发现网站上出现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();


  

本文地址:http://wangshifan.com/post/219.html
版权声明:本文为原创文章,版权归 wangshifan 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?