使用dataset如何实现图片延时加载

来源：懂视网责编：小OO 时间：2020-11-27 19:35:56

使用dataset如何实现图片延时加载

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

推荐度：

点击下载本文 文档为doc格式

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

下面小编就为大家分享一篇基于dataset的使用和图片延时加载的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

首先，先介绍一下关于javascript中dataset属性。

html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。

下面是元素应用data属性的一个例子：

<p id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</p>

要想获取某个属性的值,可以像下面这样使用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>
 <p id="box"></p>
 <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('src');
 }
 }
 }
 }
 </script>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

在angularjs中如何实现柱状图动态加载

使用js如何实现时间戳与日期格式之间转换

在Vue中有关响应式原理（详细教程）