首先，先介绍一下关于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~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~如果浏览器支持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<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~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~下面来个实际的应用吧~
（当然图片地址肯定是空的。想要看效果的自己去加个图片地址，这个效果附上图片也是看不出什么所以就不上截图了）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片延迟加载</title> <style> #box{ width: 100%; height: 500px; } #box img{ width: 100%; height: 500px; transition: 1s; opacity: 0; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> 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<window.innerHeight){ if(imgs[i].dataset.src){ imgs[i].src=imgs[i].dataset.src; imgs[i].style.opacity=1; imgs[i].removeAttribute('data-src'); } } } } </script> </body> </html>
转载于:https://www.cnblogs.com/-Steven/p/8012838.html
相关资源：JAVA上百实例源码以及开源项目