javascript_javascript 기술을 기반으로 이미지 지연 로딩 구현
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-05-16 15:21:451266검색
1. 정의
이미지 로딩 지연은 지연 로딩이라고도 하며, 특정 조건이 충족될 때 특정 이미지만 로딩하는 것입니다. 일반적으로 이미지가 많은 웹 페이지에 사용됩니다. 요청 수를 줄이거나 요청 수를 지연하여 성능을 최적화할 수 있습니다.
2. 발표양식
【1】 로딩 지연, 로딩을 지연하려면 setTimeout 또는 setInterval을 사용하세요. 로딩 전에 사용자가 나가면 자연스럽게 로딩되지 않습니다.
【2】조건부 로딩, 비동기 로딩은 특정 조건이 충족되거나 특정 조건이 트리거될 때만 시작됩니다.
[3] 시각적 영역 로딩은 사용자가 볼 수 있는 영역만 로드합니다. 이는 주로 스크롤 막대를 모니터링하여 구현되며 일반적으로 사용자가 볼 수 있는 하단 가장자리에 매우 가까울 때 로딩을 시작합니다. 사용자가 아래로 당길 때 연결되면 긴 일시 중지가 발생하지 않습니다.
3. 기본 단계
【1】웹페이지의 모든 사진은 동일한 사진으로 설정되어 있습니다
【2】이미지에 data-original = "img/test.jpg" 속성을 추가하고 이미지의 실제 주소를 저장합니다
【3】특정 조건이 발생하면 해당 지역 이미지의 src 속성을 실제 주소로 자동 변경합니다
4. 신청
1. 버튼을 클릭하면 사진이 표시됩니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<button>加载图片</button>
<img src="/static/imghwm/default1.png" data-src="#" class="lazy" alt="测试" data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];
oBtn.onclick = function(){
oImg.src = "img/loading.gif";
if(oImg.dataset){
aftLoadImg(oImg,oImg.dataset.original);
}else{
aftLoadImg(oImg,oImg.getAttribute("data-original"));
}
}
function aftLoadImg(obj,url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
}
</script>
</body>
</html>
2. 시각적 영역에 사진 표시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
.in{
border: 1px solid black;
margin: 10px;
text-align: center;
height: 400px;
width: 400px;
float: left;
}
.in img{
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img1.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img2.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img3.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img4.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img1.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img2.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img3.gif"></li>
<li class="in"><img src="/static/imghwm/default1.png" data-src="img/loading.gif" class="lazy" alt="测试" data-original = "img/img4.gif"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
loadImg(aImages);
};
function loadImg(arr){
for( var i = 0,len = arr.length; i < len; i++){
if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
arr[i].isLoad = true;
arr[i].style.cssText = "transition: ''; opacity: 0;"
if(arr[i].dataset){
aftLoadImg(arr[i],arr[i].dataset.original);
}else{
aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
}
(function(i){
setTimeout(function(){
arr[i].style.cssText = "transition: 1s; opacity: 1;"
},16)
})(i);
}
}
}
function aftLoadImg(obj,url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
}
</script>
</body>
</html>
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되고 자바스크립트 이미지의 지연 로딩을 성공적으로 구현하는 데 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.