前端ABC懒加载原理
1、先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-original）。
当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
2、这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>餐饮营销专题</title>
<meta name="keywords" content="餐饮营销专题">
<meta name="description" content="餐饮营销专题">
<style>
*{padding:0;margin:0;}
html,body,.swiper-container,.swiper-wrapper,.swiper-slide{width:100%;}
html{font: 12px/1.5 "Microsoft YaHei","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;}
img{vertical-align: middle;}
a{text-decoration:none;}
.swiper-slide{background-position:50% 50%; position:relative;overflow: hidden;text-align: center;}
.swiper-slide img{width:100%;}
.food-nav-box{width:100%;position:absolute;top:0;left:0;height:80px;border-bottom:1px solid rgba(255,255,255,0.71);}
.food-nav{width:1200px;margin:0 auto;height:40px;padding:20px 0;}
.food-logo{float:left;}
.food-back{float:right;}
.food-box{width:1200px;margin:0 auto;height:80px;position:relative;}
.food-back a{background:rgba(255,255,255,0.16);width:120px;height:40px;border-radius: 30px;border:1px solid #fff;font-size:14px;color:#fff;text-align: center;line-height:40px;display: inline-block;}
.food-footer{width:100%;position:fixed;bottom:0;z-index:999;background-image:url("http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject11.png");height:80px;background-position: center;}
#food-btm-close{position:absolute;top:30px;right:0;cursor: pointer;}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="food-nav-box">
<div class="food-nav">
<div class="food-logo">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/food_logo.png" style="width:329px;" alt="DMLei-一站式新媒体营销平台">
</div>
<div class="food-back">
<a href="/">返回首页</a>
</div>
</div>
</div>
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject1.png" alt="">
</div>
<div class="swiper-slide slide2">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject22.png" alt="">
</div>
<div class="swiper-slide slide3">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject33.png" alt="">
</div>
<div class="swiper-slide slide4">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject44.png" alt="">
</div>
<div class="swiper-slide slide5">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject55.png" alt="">
</div>
<div class="swiper-slide slide6">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject66.png" alt="">
</div>
<div class="swiper-slide slide7">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject77.png" alt="">
</div>
<div class="swiper-slide slide8">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject88.png" alt="">
</div>
<div class="swiper-slide slide9" style="margin-bottom:80px;">
<img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject99.png" alt="">
</div>
</div>
</div>
<div class="food-footer">
<div class="food-box">
<img id="food-btm-close" src="http://7xnlea.com2.z0.glb.qiniucdn.com/food-close.png" alt="">
</div>
</div>
<script src="http://7xnlea.com2.z0.glb.qiniucdn.com/jquery.min.js"></script>
</body>
<script>
$("#food-btm-close").click(function(){
$(".food-footer").animate({height:"0px"});
$(".slide10").css('margin-bottom','0');
})
</script>
<script>
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>
</html>