问题
一个电商网站上有大量的图片，加载很慢，如何使用懒加载优化用户体验？懒加载的原理：
先让所有的图片都显示同一张图片，在通过判断窗口大小以及滚动距离，判断该 DOM 元素是否在我们已视区域，如果在已视区域，则用 js 修改 img 标签的 src 为 data 中储存的真正的 src ,然后再添加一些图片出现的特效即可！html 代码
其中 data-img 储存的是 img 的真正的 src。
CSS代码：
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.lazyload img {
width: 640px;
}
.lazyload{
width: 700px;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 980px) {
.lazyload img {
width: 100%;
height: 480px;
}
.lazyload{
width: 100%;
margin: 0 auto;
text-align: center;
}
}这里做了一些用户体验优化，当屏幕小于980px时，图片宽度100%，用到了媒体查询@media
JS 代码：
var lazyLoad = (function(){
var clock;
// 函数初始化，启动监听
function init(){
// 监听滚动
$(window).on("scroll", function(){
// 清楚定时器，当滚动时间位于 200ms 内时，减少不必要的遍历
if (clock) {
clearTimeout(clock);
}
// 滚动两百毫秒后遍历一次检查
clock = setTimeout(function(){
checkShow();
}, 200);
})
// 检查图片是否处于已视区域
checkShow();
}
// 检查图片是否处于已视区域
function checkShow(){
$(".lazyload img").each(function(){
var $cur =$(this);
// 给每个 img 增加一个 isLoaded 属性
// 如果 isLoaded 为 true ,则不用再次显示，return 回去
if($cur.attr('isLoaded')){
return;
}
// 如果 shouldShow($cur) 为 true,则表示该图片位于已视区域，且 isLoaded 属性还未存在
if(shouldShow($cur)){
// 展示该图片真正src
showImg($cur);
}
})
}
// $node 代表 this，表示 img 数组里面对应的每一个 img
function shouldShow($node){
// 获取距离窗口滚动距离，窗口高度，和图片距离文档顶部的距离
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = $node.offset().top;
// 如果图片距离文档顶部的距离小于距离窗口滚动距离+窗口高度，那么处于已视区域，否则处于未视区域
if(top < winH + scrollH){
return true;
}else{
return false;
}
}
// 展示该图片真正src
function showImg($node){
// 先将图片隐藏
$node.hide()
// 设置该图片真正src
$node.attr('src', $node.attr('data-img'));
// 让图片淡入
$node.fadeIn()
// 设置 isLoaded 属性为 true
$node.attr('isLoaded', true);
}
// 返回 init 方法
return {
init: init
}
})()
// 调用lazyLoad.init()方法
lazyLoad.init();
记得，本文基于JQ进行操作，记得引入JQ
个人认为这是最简单理解懒加载的实例，项目DEMO请点击这里。
【前端小功能|懒加载】希望本文对你有用，喜欢就点个顶呗！(? ω ?)
