小编给大家分享一下如何使用dataset和实现图片延时加载,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为乌兰企业提供专业的网站制作、做网站,乌兰网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
首先,先介绍一下关于javascript中dataset属性。。
html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。
下面是元素应用data属性的一个例子:
$18.3
要想获取某个属性的值,可以像下面这样使用dataset对象:
var expenseday=document.getElementById('day-meal-expense'); var typeOfDrink=expenseday.dataset.drink; console.log(typeOfDrink);//tea console.log(expenseday.dataset.food);//noodle console.log(expenseday.dataset.meal);//lunch
如果浏览器支持dataset,则会弹出注释内容,如果浏览器不支持dataset则会报错,无法获取属性drink/food/meal的值:对象为null或未定义(如IE9版本).
data属性基本上所有的浏览器都是支持的,但是dataset对象支持的就比较特殊了,目前仅在Opera 11.1+,Chrome 9+下可以通过javascript,使用dataset访问你自定义的data属性.至于其他浏览器,FireFox 6+(未出)以及Safari 6+(未出)会支持dataset对象,至于IE浏览器,目前看来还是遥遥无期的趋势.
问:不是有getAttribute来获取自定义属性么。要这个干嘛??
答:如果使用传统的方法获取属性值应该会类似下面:
var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
现在,如果我们要获得多个自定义的属性值,就要用下面N行代码来实现了:
var attrs=expenseday.attributes, expense={},i,j; for (i=0,j=attrs.length;i而使用dataset属性,我们根本不需要任何循环去获取你想要的那个值,直接秒杀:
expense=document.getElementById('day-meal-expense').dataset;问:怎么操作这玩意~
答:可以像下面这样操作名-值对:
charInput=[]; for(var item in expenseday){ charInput.push(expenseday[item]); }让所有的自定义属性塞到一个数组中.
如果你想删除一个data属性,可以这么做:
delete expenseday.dataset.meal; console.log(expenseday.dataset.meal)//undefined如果你想给元素添加一个属性,可以这么做:
expenseday.dataset.dessert='icecream'; console.log(expenseday.dataset.dessert);//icecreamdataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.
下面来个实际的应用吧~
(当然图片地址肯定是空的。想要看效果的自己去加个图片地址,这个效果附上图片也是看不出什么所以就不上截图了)
图片延迟加载 看完了这篇文章,相信你对“如何使用dataset和实现图片延时加载”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前名称:如何使用dataset和实现图片延时加载
新闻来源:http://www.cdkjz.cn/article/jeoddg.html