基于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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
javascript闭包的理解
Apr 01 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
js实现3d悬浮效果
Feb 16 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
Node.js Event Loop各阶段讲解
Mar 08 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 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
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
Python pickle模块用法实例分析
2015/05/27 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python字符类型的一些方法小结
2016/05/16 Python
Python字典简介以及用法详解
2016/11/15 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python pymongo模块用法示例
2018/03/31 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python实现动态数组的示例代码
2019/07/15 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python读取YAML文件过程详解
2019/12/30 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电