基于dataset的使用和图片延时加载的实现方法


Posted in Javascript onDecember 11, 2017

首先,先介绍一下关于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>

以上这篇基于dataset的使用和图片延时加载的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue-cli配置flexible过程详解
Jul 04 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 #Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 #Javascript
Node.js中sequelize时区的配置方法
Dec 10 #Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 #Javascript
关于react中组件通信的几种方式详解
Dec 10 #Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 #Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 #Javascript
You might like
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
股权转让协议书
2014/04/12 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android