如何使用dataset和实现图片延时加载-创新互联

小编给大家分享一下如何使用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);//icecream

dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.

下面来个实际的应用吧~

(当然图片地址肯定是空的。想要看效果的自己去加个图片地址,这个效果附上图片也是看不出什么所以就不上截图了)




 
 图片延迟加载
 



 
   var data=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]  var box=document.getElementById('box');  // var img=document.createElement(img);  for (var i = 0; i < data.length; i++) {   var img=document.createElement('img');   img.dataset.src=data[i];   // img.style.opacity=1;   box.appendChild(img);   // console.log(box);  }  var imgs=document.querySelectorAll('img');  window.addEventListener('scroll',loadFn);  window.addEventListener('load',loadFn);  function loadFn(){   for (var i = 0; i < imgs.length; i++) {   if(imgs[i].getBoundingClientRect().top

看完了这篇文章,相信你对“如何使用dataset和实现图片延时加载”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:如何使用dataset和实现图片延时加载-创新互联
标题链接:http://azwzsj.com/article/dspppc.html

其他资讯