dataset 기반 사용 및 그림 지연 로드 실현 방법

우선 자바 script 의 dataset 속성 에 대해 소개 합 니 다.
html 5 에 서 는 데이터-접 두 사 를 사용 하여 사용자 정의 속성 을 설정 하여 데 이 터 를 저장 할 수 있 습 니 다.
다음은 요소 가 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 은 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 의 사용 과 그림 지연 로 딩 을 바탕 으로 하 는 실현 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

두 개의 데이터 세트를 하나로 결합

매우 다른 두 개체를 단일 컬렉션으로 반환해야 했습니다. 그리고 두 개체의 좋은 부분을 하나의 결합된 단위로 나타낼 수 있는 새 개체를 추가하는 것은 분명히 큰 문제가 아닙니다. 그러나 결과적으로 더 흥미로운 문제 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

dataset 기반 사용 및 그림 지연 로드 실현 방법

좋은 웹페이지 즐겨찾기