基于dataset的使用和圖片延時(shí)加載的實(shí)現(xiàn)方法
首先,先介紹一下關(guān)于javascript中dataset屬性。。
html5中可以使用data-前綴設(shè)置我們需要的自定義屬性,來(lái)進(jìn)行一些數(shù)據(jù)的存放。
下面是元素應(yīng)用data屬性的一個(gè)例子:
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>
要想獲取某個(gè)屬性的值,可以像下面這樣使用dataset對(duì)象:
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,則會(huì)彈出注釋內(nèi)容,如果瀏覽器不支持dataset則會(huì)報(bào)錯(cuò),無(wú)法獲取屬性drink/food/meal的值:對(duì)象為null或未定義(如IE9版本).
data屬性基本上所有的瀏覽器都是支持的,但是dataset對(duì)象支持的就比較特殊了,目前僅在Opera 11.1+,Chrome 9+下可以通過(guò)javascript,使用dataset訪問(wèn)你自定義的data屬性.至于其他瀏覽器,FireFox 6+(未出)以及Safari 6+(未出)會(huì)支持dataset對(duì)象,至于IE瀏覽器,目前看來(lái)還是遙遙無(wú)期的趨勢(shì).
問(wèn):不是有g(shù)etAttribute來(lái)獲取自定義屬性么。要這個(gè)干嘛??
答:如果使用傳統(tǒng)的方法獲取屬性值應(yīng)該會(huì)類似下面:
var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
現(xiàn)在,如果我們要獲得多個(gè)自定義的屬性值,就要用下面N行代碼來(lái)實(shí)現(xià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屬性,我們根本不需要任何循環(huán)去獲取你想要的那個(gè)值,直接秒殺:
expense=document.getElementById('day-meal-expense').dataset;
問(wèn):怎么操作這玩意~
答:可以像下面這樣操作名-值對(duì):
charInput=[]; for(var item in expenseday){ charInput.push(expenseday[item]); }
讓所有的自定義屬性塞到一個(gè)數(shù)組中.
如果你想刪除一個(gè)data屬性,可以這么做:
delete expenseday.dataset.meal; console.log(expenseday.dataset.meal)//undefined
如果你想給元素添加一個(gè)屬性,可以這么做:
expenseday.dataset.dessert='icecream'; console.log(expenseday.dataset.dessert);//icecream
dataset并不是典型意義上的JavaScript對(duì)象,而是個(gè)DOMStringMap對(duì)象,DOMStringMap是HTML5一種新的含有多個(gè)名-值對(duì)的交互變量.
下面來(lái)個(gè)實(shí)際的應(yīng)用吧~
(當(dāng)然圖片地址肯定是空的。想要看效果的自己去加個(gè)圖片地址,這個(gè)效果附上圖片也是看不出什么所以就不上截圖了)
<!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的使用和圖片延時(shí)加載的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁(yè)面
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁(yè)面 的相關(guān)資料,需要的朋友可以參考下2016-09-09JavaScript輕松創(chuàng)建級(jí)聯(lián)函數(shù)的方法示例
級(jí)聯(lián)函數(shù)也叫鏈?zhǔn)胶瘮?shù),方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作 (集中在一句代碼)。一定程度上可以減少代碼量,缺點(diǎn)是它占用了 函數(shù)的返回值。下面這篇文章主要給大家介紹了利用JavaScript如何輕松創(chuàng)建級(jí)聯(lián)函數(shù)的方法示例,需要的朋友可以參考借鑒。2017-02-02JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)按鈕
這篇文章主要介紹了基于JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)按鈕,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08JavaScript實(shí)現(xiàn)二叉樹層序遍歷
這篇文章主要為大家簡(jiǎn)單介紹一下JS中如何實(shí)現(xiàn)二叉樹層序遍歷,感興趣的小伙伴可以詳細(xì)參考閱讀2023-03-03鼠標(biāo)移動(dòng)到圖片名上,顯示圖片的簡(jiǎn)單實(shí)例
鼠標(biāo)移動(dòng)到名(wait.gif)上,顯示圖片,鼠標(biāo)移開則不顯示圖片2013-07-07css值轉(zhuǎn)換成數(shù)值請(qǐng)拋棄parseInt
絕大多數(shù)人喜歡用parseInt()把css中的字符串值轉(zhuǎn)換成數(shù)值2011-10-10基于JQuery模仿蘋果桌面的Dock效果(初級(jí)版)
新的一天新的開始,今天要分享的是用JQuery模仿蘋果操作系統(tǒng)桌面的Dock效果,之所以稱之為初級(jí)版,是因?yàn)槠渲羞€有一些bug,顯示效果并不穩(wěn)定2012-10-10交叉觀察器?IntersectionObserver用法詳解
這篇文章主要為大家介紹了交叉觀察器?IntersectionObserver用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10bootstrap響應(yīng)式導(dǎo)航條模板使用詳解(含下拉菜單,彈出框)
這篇文章主要為大家詳細(xì)介紹了bootstrap響應(yīng)式導(dǎo)航條模板使用詳解,含下拉菜單,彈出框效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11TypeScript?mixin提升代碼復(fù)用性的方法和原理
在前端開發(fā)中,我們經(jīng)常需要在不同的組件或類之間共享功能代碼,Mixin提供了一種非常靈活的方式,可以讓我們?cè)诓黄茐睦^承關(guān)系的前提下,將功能代碼復(fù)用到多個(gè)對(duì)象中,文章通過(guò)代碼示例介紹mixin提升代碼復(fù)用性的方法和好處,需要的朋友可以參考下2023-06-06