dataset的使用和图片延时加载的实现
首先，先介绍一下关于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的使用和图片延时加载的实现的更多相关文章
- picLazyLoad 图片延时加载，包含背景图片
/** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...
- 图片延时加载jquery.inview.js用法详解
我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 一段实现页面上的图片延时加载的js
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- Ionic 图片延时加载
图片的延时加载是为了提供App的运行效率,那么是如何实现的呢?献上github: https://github.com/paveisistemas/ionic-image-lazy-load 1.下 ...
- js实现图片延时加载的原理
实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...
- [转载]jQuery.lazyload详解 - 图片延时加载
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
随机推荐
- MongoDB原子操作
MongoDB原子操作常用命令: 1. $set: 用来指定一个键并更新键值,若键不存在则创建并赋值. { $set : { field : value } } 2. $unset: 用来删除一个键. ...
- Spring in action记录
最近一段时间重新学习了一遍SPRING,现在对这些笔记整理一下,一来算是对之前的学习有一个交代,二来当是重新学习一次,三来可以留下备份 这次学习中以SPRING IN ACTION 4这学习资料,整书 ...
- [译]ASP.NET Core 2.0 路由引擎
问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(ISe ...
- SE6 不定参数和默认参数详解和使用细节
在SE5以前我们通常通过arguments类数组对象来引用不定形参,SE6则使用了一种叫做不定参数的写法,比起隐式的arguments要直观的多. 不定参数使用...参数名来指定一个不定参数,参数名指 ...
- 利用python深度学习算法来绘图
可以画画啊!可以画画啊!可以画画啊! 对,有趣的事情需要讲三遍. 事情是这样的,通过python的深度学习算法包去训练计算机模仿世界名画的风格,然后应用到另一幅画中,不多说直接上图! 这个是世界名画& ...
- 1053: [HAOI2007]反素数ant
1053: [HAOI2007]反素数ant Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3480 Solved: 2036[Submit][St ...
- EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能
一.EasyUI jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 e ...
- Linux上jdk的安装
安装jdk a.检测是否安装了jdk 运行java -version b.若有需要将其卸载 c.查看安装那些jdk rpm -qa | grep java d. ...
- 二：SQL映射文件
二:SQL映射文件 1.SQL映射文件: (1)mapper:映射文件的根元素节点,只有一个属性namespace(命名空间) 作用:用于区分不同的mapper全局唯一 绑定dao接口即面向接口编程, ...
- python进阶------进程线程（三）
python中的进程 1.multiprocessing模块 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进 ...