首先，先介绍一下关于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一种新的含有多个名-值对的交互变量.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面来个实际的应用吧~

（当然图片地址肯定是空的。想要看效果的自己去加个图片地址，这个效果附上图片也是看不出什么所以就不上截图了）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片延迟加载</title>
  6.     <style>
  7.         #box{
  8.             width: 100%;
  9.             height: 500px;
  10.         }
  11.         #box img{
  12.             width: 100%;
  13.             height: 500px;
  14.             transition: 1s;
  15.             opacity: 0;
  16.         }
  17.     </style>
  18.  
  19. </head>
  20. <body>
  21.     <div id="box"></div>
  22.     <script type="text/javascript">
  23.         var data=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]
  24.         var box=document.getElementById('box');
  25.         // var img=document.createElement(img);
  26.         for (var i = 0; i < data.length; i++) {
  27.             var img=document.createElement('img');
  28.             img.dataset.src=data[i];
  29.             // img.style.opacity=1;
  30.             box.appendChild(img);
  31.             // console.log(box);
  32.         }
  33.         var imgs=document.querySelectorAll('img');
  34.         window.addEventListener('scroll',loadFn);
  35.         window.addEventListener('load',loadFn);
  36.         function loadFn(){
  37.             for (var i = 0; i < imgs.length; i++) {
  38.                 if(imgs[i].getBoundingClientRect().top<window.innerHeight){
  39.                     if(imgs[i].dataset.src){
  40.                         imgs[i].src=imgs[i].dataset.src;
  41.                         imgs[i].style.opacity=1;
  42.                         imgs[i].removeAttribute('data-src');
  43.                     }
  44.                 }
  45.             }
  46.         }
  47.     </script>
  48. </body>
  49. </html>

dataset的使用和图片延时加载的实现的更多相关文章

  1. picLazyLoad 图片延时加载，包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  2. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  3. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  4. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  5. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  6. Ionic 图片延时加载

    图片的延时加载是为了提供App的运行效率,那么是如何实现的呢?献上github:  https://github.com/paveisistemas/ionic-image-lazy-load 1.下 ...

  7. js实现图片延时加载的原理

    实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...

  8. [转载]jQuery.lazyload详解 - 图片延时加载

    jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...

  9. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

随机推荐

  1. 05-从零玩转JavaWeb-彻底搞懂值传递

    一.数据类型分类 基本数据类型: 只有一块存储空间, 在栈中,存放的是具体的值        引用数据类型:    引用数据类型有两块存储空间      一个在栈(Stack)中,一个在堆(heap) ...

  2. hive1.2.2部署

    1.解压hvie.tar,进入conf目录下,cp hive-default.xml.template hive-site.xml; 2.将hive下的新版本jline的JAR包拷贝到hadoop下: ...

  3. 执行计划查看，autotrace工具的使用

    ---工具的简单介绍   001啥是autotrace,翻译自动跟踪,跟踪什么额? SQL的执行过程   我们老是讲ORACLE体系结构里面,共享池有个组件库高速缓存,存放SQL语句执行计划   什么 ...

  4. 楼梯T-SQL：超越基础6级：使用CASE表达式和IIF函数

     从他的楼梯到T-SQL DML,Gregory Larsen涵盖了更多的高级方面的T-SQL语言,如子查询. 有时您需要编写一个可以根据另一个表达式的评估返回不同的TSQL表达式的单个TSQL语句. ...

  5. 使用Identity Server 4建立Authorization Server (2)

    第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第一部分主要是建立了一个简单的Identity Server. 接下来继续: 建立Web Api项目 ...

  6. this 和 new 构造函数

    function people(name) {     这样定义是在全局命名空间(global namespace)    name: name,    sayname: function() {   ...

  7. Ubuntu16 远程连接MySQL

    1.进入MySQL配置目录允许其他IP可以链接 vi /etc/mysql/mysql.conf.d/mysqld.cnf 吧下面这行注释掉 #bind-address = 127.0.0.1 2.远 ...

  8. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  9. vue 2 仿IOS 滚轮选择器 从入门到精通 （一）

    大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错 ...

  10. 向TRichEdit插入图片的单元

    很简单, 就3个函数, 直接看代码吧 unit RichEditBmp; { 2005-03-04 LiChengbin Added: Insert bitmap or gif into RichEd ...