如何使用dataset和實現(xiàn)圖片延時加載-創(chuàng)新互聯(lián)

小編給大家分享一下如何使用dataset和實現(xiàn)圖片延時加載，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供烏魯木齊網(wǎng)站建設、烏魯木齊做網(wǎng)站、烏魯木齊網(wǎng)站設計、烏魯木齊網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、烏魯木齊企業(yè)網(wǎng)站模板建站服務，10余年烏魯木齊做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

首先，先介紹一下關于javascript中dataset屬性。。

html5中可以使用data-前綴設置我們需要的自定義屬性,來進行一些數(shù)據(jù)的存放。

下面是元素應用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,則會彈出注釋內(nèi)容,如果瀏覽器不支持dataset則會報錯,無法獲取屬性drink/food/meal的值:對象為null或未定義(如IE9版本).

data屬性基本上所有的瀏覽器都是支持的,但是dataset對象支持的就比較特殊了,目前僅在Opera 11.1+,Chrome 9+下可以通過javascript,使用dataset訪問你自定義的data屬性.至于其他瀏覽器,FireFox 6+(未出)以及Safari 6+(未出)會支持dataset對象,至于IE瀏覽器,目前看來還是遙遙無期的趨勢.

問：不是有getAttribute來獲取自定義屬性么。要這個干嘛？？

答：如果使用傳統(tǒng)的方法獲取屬性值應該會類似下面：

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');

現(xiàn)在,如果我們要獲得多個自定義的屬性值,就要用下面N行代碼來實現(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)去獲取你想要的那個值,直接秒殺：

expense=document.getElementById('day-meal-expense').dataset;

問：怎么操作這玩意~

答：可以像下面這樣操作名-值對:

charInput=[];
 for(var item in expenseday){
 charInput.push(expenseday[item]);
 }

讓所有的自定義屬性塞到一個數(shù)組中.

如果你想刪除一個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和實現(xiàn)圖片延時加載”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：如何使用dataset和實現(xiàn)圖片延時加載-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article32/dspppc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、建站公司、網(wǎng)站改版、定制網(wǎng)站、微信公眾號、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容