基於dataset的使用和圖片延時載入的實現方法

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

首先,先介紹一下關於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實現圖片延時載入的方法一段實現頁面上的圖片延時載入的js程式碼javascript實現圖片延遲載入方法彙總(三種方法)

相關文章

前端開發 最新文章