<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<meta name="viewport"-->
<!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
<!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<!--<title>Document</title>-->
<!--<style>-->
<!--.wrap{-->
<!--width: 500px;-->
<!--margin: 200px auto;-->
<!--overflow:hidden;-->
<!--}-->
<!--.page{-->
<!--height:600px;-->
<!--background: red;-->
<!--overflow:auto;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="warp">-->
<!--<div class="page">-->
<!--<p><img src="img/loading.gif" data-src="img/1.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/2.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/3.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/4.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/5.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/6.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/7.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/8.jpg" alt=""></p>-->
<!--<p><img src="img/loading.gif" data-src="img/9.jpg" alt=""></p>-->
<!--</div>-->
<!--</div>-->
<!--<script>-->
<!--var scrollElement=document.querySelector('.page')-->
<!--viewH=document.documentElement.clientHeight;-->
<!--function lazyload() {-->
<!--var nodes=document.querySelectorAll('img[data-src]')-->
<!--Array.prototype.forEach.call(nodes,function (item,index) {-->
<!--var rect;-->
<!--if(item.dataset.src=='') return;-->
<!--rect=item.getBoundingClientRect();-->
<!--if(rect.bottom >=0 && rect.top < viewH){-->
<!--(function (item) {-->
<!--var img=new Image();-->
<!--img.onload=function () {-->
<!--item.src=img.src;-->
<!--}-->
<!--img.src=item.dataset.src;-->
<!--item.dataset.src=''-->
<!--})(item)-->
<!--}-->
<!--})-->
<!--}-->
<!--lazyload();-->
<!--scrollElement.addEventListener('scroll',throttle(lazyload,500,1000))-->
<!--function throttle(fun,delay,time) {-->
<!--var timeout,-->
<!--startTime=new Date()-->
<!--return function () {-->
<!--var context=this,-->
<!--args=arguments,-->
<!--curTime=new Date();-->
<!--clearTimeout(timeout);-->
<!--if(curTime-startTime >= time){-->
<!--fun.apply(context,args);-->
<!--startTime=curTime;-->
<!--}else {-->
<!--timeout=setTimeout(fun,delay);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!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="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></li>
<li class="in"><img src="img/loading.gif" alt="測試" data-original = "img/1.jpg"></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>
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>Document</title>-->
<!--<style>-->
<!--img {-->
<!--display: block;-->
<!--margin-bottom: 50px;-->
<!--width: 400px;-->
<!--height: 400px;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<img src="img/loading.gif" data-src="img/1.jpg" alt="">-->
<!--<script>-->
<!--var num = document.getElementsByTagName('img').length;-->
<!--var img = document.getElementsByTagName("img");-->
<!--var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷-->
<!--lazyload(); //頁面載入完畢加載可是區域內的圖片-->
<!--window.onscroll = lazyload;-->
<!--function lazyload() { //監聽頁面滾動事件-->
<!--var seeHeight = document.documentElement.clientHeight; //可見區域高度-->
<!--var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度-->
<!--for (var i = n; i < num; i++) {-->
<!--if (img[i].offsetTop < seeHeight + scrollTop) {-->
<!--if (img[i].getAttribute("src") == "default.jpg") {-->
<!--img[i].src = img[i].getAttribute("data-src");-->
<!--}-->
<!--n = i + 1;-->
<!--}-->
<!--}-->
<!--}-->
<!--function throttle(fun, delay, time) {-->
<!--var timeout,-->
<!--startTime = new Date();-->
<!--return function() {-->
<!--var context = this,-->
<!--args = arguments,-->
<!--curTime = new Date();-->
<!--clearTimeout(timeout);-->
<!--// 如果達到了規定的觸發時間間隔，觸發 handler-->
<!--if (curTime - startTime >= time) {-->
<!--fun.apply(context, args);-->
<!--startTime = curTime;-->
<!--// 沒達到觸發間隔，重新設定定時器-->
<!--} else {-->
<!--timeout = setTimeout(fun, delay);-->
<!--}-->
<!--};-->
<!--};-->
<!--// 實際想綁定在 scroll 事件上的 handler-->
<!--function lazyload(event) {}-->
<!--// 採用了節流函數-->
<!--window.addEventListener('scroll',throttle(lazyload,500,1000));-->
<!--</script>-->
<!--</body>-->
</html>圖片懶加載
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
promise應用一
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid