懶加載條件（img 出現在窗口位置）
img.offsetTop < window.innerHeight + document.body.scrollTop;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
display: block;
width: 700px;
height: 400px;
}
li{
list-style: none;
}
</style>
</head>
<body>
<ul class="img-group">
<li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
<li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
<li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
<li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
<li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
<li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
</ul>
<script type="text/javascript">
var imgs = document.querySelectorAll('img');
loadImg()
window.onscroll = function(){
loadImg()
}
function loadImg(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var winTop = window.innerHeight;
for(var i=0;i < imgs.length;i++){
if(imgs[i].offsetTop < scrollTop + winTop ){
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
</script>
</body>
</html>
函數節流（通過setTimeout定時器實現）
函數節流就是針對調用頻率高的函數，通過設置定時器，使其在執行後間隔一段時間，才進行下一次的執行，避免重複頻繁的調用導致的瀏覽器性能以及ajax重複調用問題。
(最常見的一些需要節流的事件：onresize，scroll，mousemove ,mousehover，因爲這些事件會在頁面中頻繁被觸發)
<script type="text/javascript">
var imgs = document.querySelectorAll('img');
window.onload=function(){
throttle(lazyLoad(),200);
}
function lazyLoad(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var winTop = window.innerHeight;
for(var i=0;i < imgs.length;i++){
if(imgs[i].offsetTop < scrollTop + winTop ){
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
function throttle(method,delay){
var timer = null;
var context = this, //上下文
args=arguments; //函數參數
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
window.onscroll = function(){
throttle(lazyLoad(),300);
}
</script>
IntersectionObserver 懶加載
<script type="text/javascript">
var imgs = document.querySelectorAll('img');
window.onload = function () {
io()
}
function io(){
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry && entry.isIntersecting) {
entry.target.src = entry.target.dataset.src
io.unobserve(entry.target) //停止觀察 接受一個element元素
}
})
})
imgs.forEach(item => {
io.observe(item) //開始觀察，接受一個DOM節點對象
})
}
</script>