基于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 日期对象Date扩展方法
May 30 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
javascript实现左右缓动动画函数
Nov 25 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
dedecms模版制作使用方法
2007/04/03 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
5 cool javascript apps
2007/03/24 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python: glob匹配文件的操作
2020/12/11 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
《雨点》教学反思
2014/02/12 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年除四害工作总结
2015/07/23 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
HTML基础详解(下)
2021/10/16 HTML / CSS