datasetに基づく使用と画像の遅延負荷の実現方法

3889 ワード

dataset 使用画像遅延読み込み

まず、javascriptのdataset属性について紹介します。
httml 5では、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または未定義（IE 9バージョンなど）です。
data属性は基本的にすべてのブラウザがサポートされていますが、datasetオブジェクトがサポートしているのは特殊です。現在はOpera 11.1+、Chrome 9+の下でjavascriptを通じて、datasetを使ってカスタマイズしたdata属性にアクセスできます。他のブラウザについては、FireFox 6+(未出)およびSafari 6+(未出)はdatasetオブジェクトをサポートします。
カスタム属性を取得するためにget Attributeがあるのではないですか？これは何ですか？
従来の方法で属性値を取得すると以下のようになるはずです。


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]);
 }

すべてのカスタム属性を1つの配列にセットします。
ダタ属性を削除したいなら、こうしてもいいです。


delete expenseday.dataset.meal;
console.log(expenseday.dataset.meal)//undefined

要素に属性を追加したいなら、こうしてもいいです。


expenseday.dataset.dessert='icecream';
console.log(expenseday.dataset.dessert);//icecream

datasetは典型的な意味でJavaScriptオブジェクトではなく、DOMStringMapオブジェクトであり、DOMStringMapはHTML 5の新しい複数の名前-値ペアを含むインタラクティブ変数である。
実用的な応用をしてみましょう。
（もちろん写真の住所はきっと空いています。効果を見たい自分はピクチャーの住所をプラスして、この効果はピクチャーを付け加えても何も見えないので、スクリーンショットに行きません）


<!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の使用と画像の遅延に基づいてロードされたこの実装方法は、小編集が皆さんに提供しているすべての内容です。

spring強制注入と引用実例解析

SpringMVCの@InitBinderパラメータ変換コードの例