<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="animate.css" rel="stylesheet"/>
<style type="text/css">
.image-item{
width:40%;
margin-right: 5px;
display: inline-block;
height: 350px;
width: 250px;
background: silver;
}
.beauty-list{
margin: 0 auto;
width: 560px;
height: 1200px;
}
</style>
</head>
<body>
<div class="beauty-list">
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/3/85/8f95e6676b_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/9/94/e83f3ee081_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/d/ab/a770c6585f_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/7/93/b127f14ce1_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/9/8d/69f294e09f_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/5/49/93e9fa5d92_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/7/db/a66082428c_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/4/2f/c942ec6a20_250_350.jpg"/>
<img src="" class="image-item" lazyload="true" data-original="http://pic1.win4000.com/pic/4/fd/34e9b78bfe_250_350.jpg"/>
</div>
<div id="test">22222</div>
<script type="text/javascript"
src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script>
<script>
//圖片懶加載
// function lazyload(){
// var viewHeight =window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// var elems = document.querySelectorAll('img[data-original][lazyload]');
// console.log(elems);
// Array.prototype.forEach.call(elems,function(item,idx){
// var rect;
// if(item.dataset.original===''){
// return;
// }
// rect = item.getBoundingClientRect();
// if(rect.bottom>=0 && rect.top < viewHeight){
// !function(){
// var img = new Image();
// img.src = item.dataset.original;
// img.onload = function(){
// item.src = img.src;
// }
// item.removeAttribute('data-original');
// item.removeAttribute('lazyload');
// }()
// }
// });
// }
// lazyload();
// document.addEventListener('scroll',lazyload);
//原生懶加載
//可視區域
function showDiv(){
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var testDiv = document.getElementById('test');
var top = testDiv.getBoundingClientRect().top;
if(top<=clients){
testDiv.classList.add('animated');
testDiv.classList.add('infinite');
testDiv.classList.add('bounce');
}
}
window.onscroll = showDiv;
//使用插件zepto.lazyload.js實現懶加載
$('img[data-original][lazyload]').lazyload();
</script>
</body>
</html>
效果：
