원본 javaScript에서 그림 시간 지연 로드를 실현하는 방법
5088 단어 원생javaScript그림
우선, 사진의 시간 지연 로드는 우리의 대역폭을 절약하고 더욱 좋은 사용자 체험을 얻을 수 있다. 특히 사진이 많은 사이트에 있어서 이 점은 매우 중요하다. 다음은 여러분과 사진의 시간 지연 로드 원리와 실현 코드를 연구해 보자.
그림 시간 지연 로드 원리
그림 시간 지연 불러오는 원리는 html에 있는 그림 src가 작성한 것이 진정한 그림 주소가 아니라 사용자 정의 속성으로 그림 주소를img 라벨에 부여하는 것이다. 예를 들어 src="img/loading.gif” data-url=”img/1.jpg', 그리고 js를 통해 브라우저 스크롤 이벤트를 판단하여 특정한 곳에 도달했을 때 사용자 정의 속성 안의 그림의 실제 주소를 현재img 라벨의 src에 부여하여 그림의 동적 표시를 실현합니다.진정한 프로젝트에서 이 그림의 주소는aax를 통해img에 부여된 사용자 정의 속성을 전달할 수 있습니다.
원본 JS 구현 이미지 지연 로드 인스턴스:
글의 내용이 보기에는 다소 무미건조해 보인다. 나는 간단한 데모를 썼다. 지금 모든 코드를 붙여서 필요한 친구는 직접 복사해서 코드를 보면 알 수 있다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<style>
img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}
</style>
</head>
<body>
<div id="div">
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
</div>
<script type="text/javascript">
var obj=document.getElementById("div").getElementsByTagName("img"),
h=window.innerHeight || document.documentElement.clientHeight;
for(var i=0;i<obj.length;i++){
obj[i].url=obj[i].getAttribute("data-url");
obj[i].top=obj[i].offsetTop;
obj[i].flag=true; // ， ， ；
}
var fnLoad = function(obj){
var t = document.body.scrollTop || document.documentElement.scrollTop;
if(t+h>obj.top+200&&obj.top>t){ // 200 ，
setTimeout(function(){
obj.src=obj.url;
obj.flag=false;
},500)
}
}
window.onscroll = window.onload=function(){
for(var i=0;i<obj.length;i++){
if(obj[i].flag){
fnLoad(obj[i]);
}
}
}
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원본 javaScript에서 그림 시간 지연 로드를 실현하는 방법본고는 원생javaScript가 그림의 시간 지연을 실현하여 불러오는 방법을 실례로 기술하였다.그림 시간 지연 불러오는 것은 사실 jquery 플러그인이 있고 불러오는 방법이 매우 간단하고 합리적이지만 jquery ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
