基于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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
vue.js循环radio的实例
Nov 07 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
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python读取Android permission文件
2013/11/01 Python
Python----数据预处理代码实例
2019/03/20 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
django页面跳转问题及注意事项
2019/07/18 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python request使用方法及问题总结
2020/04/26 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
安全教育实施方案
2014/03/02 职场文书
授权委托书格式范文
2014/08/02 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
Java界面编程实现界面跳转
2022/06/16 Java/Android
教你nginx跳转配置的四种方式
2022/07/07 Servers