图片的延时加载实现方法

原创 zhengke 随笔 效果实现 310阅读 2017-12-09 21:36:13 举报

首先,先介绍一下关于javascript中dataset属性。。
html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。
下面是元素应用data属性的一个例子:
~~~~~~~~~~~~~~~~·
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>
要想获取某个属性的值,可以像下面这样使用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

问:不是有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<j;i++){
  if(attrs[i].name.substring(0,5)=='data-'){
    expense[attrs[i].name.substring(5)]=attrs[i].value;
  }
}
而使用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

下面来个实际的应用吧~
(当然图片地址肯定是空的。想要看效果的自己去加个图片地址)
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复