在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
思路：
将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
关于各种宽高：
页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
示例：
jqueryLazyload方式
下载地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js
<section class="module-section" id="container">
<img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
</section>
require.config({
baseUrl : "/static",
paths: {
jquery:'component/jquery/jquery-3.1.0.min'
jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
},
shim: {
jqueryLazyload: {
deps: ['jquery'],
exports: '$'
}
}
});
require(
[
'jquery',
'jqueryLazyload'
],
function($){
$(document).ready(function() {
$("img.lazy-load").lazyload({
effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
threshold : 180, //预加载，在图片距离屏幕180px时提前载入
event: 'click', // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
container: $("#container"), // 指定对某容器中的图片实现效果
failure_limit：2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
});
});
});
为了代码可读性，属性值我都写好了注释。值得注意的是预制图片属性为data-original，并且最好是给予初始高宽占位，以免影响布局，当然这里为了演示我是写死的640x480，如果是响应式页面，高宽需要动态计算。
dome演示地址：http://h5.sztoda.cn/test/testLazyLoad
echo.js方式
在前面“前端知识的一些总结”的博文中，介绍了一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去！
下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo
<style>
.demo img {
width: 736px;
height: 490px;
background: url(images/loading.gif) 50% no-repeat;}
</style>
<div class="demo">
<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
Echo.init({
offset: 0,//离可视区域多少像素的图片可以被加载
throttle: 0 //图片延时多少毫秒加载
});
</script>
说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
示例：
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>图片懒加载</title>
</head>
<style>
*{margin: 0;padding: 0;}
img{width: 48%;height: 150px;display: inline;border: 1px solid
</style>
<body>
<div id="div">
<div id="one">
<img class="img" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/2.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/3.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/4.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/5.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/1.jpg" src="img/2.png" alt="">
</div>
<div id="two">
<img class="img" data-url="img/6.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/7.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/8.jpg" src="img/2.png" alt="">
<img class="img" data-url="img/2.jpg" src="img/2.png" alt="">
</div>
</div>
<script>
//首次进入触发判断
getList();
function getList(){
//第一次显示的图片列表高度
var contentHeight = document.getElementById('one').offsetHeight;
//设备可用高度
var availHeight = window.screen.availHeight;
//如果不滚动two直接被显示出来
if (contentHeight<availHeight){
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
})();
}
//遍历#two，然后替换路径
for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){
var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
})();
}
}else {
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
})();
}
}
}
//#two显示的次数 0是第一次显示
var twoShowTime = 0;
//滚动事件
window.onscroll = function(){
if (twoShowTime == 0){
scroll();
}
};
//滚动判断图片是否加载
function scroll() {
//#content的高度
var contentHeight = document.getElementById('one').offsetHeight;
//设备可用高度
var availHeight = window.screen.availHeight;
//滚动的高度
var scrollHeight = document.body.scrollTop;
//判断如果显示出来了#two
if (scrollHeight > contentHeight - availHeight) {
//遍历#two下的img，然后替换路径
for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) {
var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function () {
document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
})();
}
twoShowTime = 1;
}
}
</script>
</body>
</html>
使用jQuery实现图片懒加载原理
在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。
所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。
本文给出一种利用jQuery实现图片懒加载的原理。它的基本思想是：在输出HTML的时候，不要直接输出<img src="xxx"，而是输出如下的img标签：
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
因此，页面显示的图片是一个gif加载动画。当页面滚动时，如果图片出现在屏幕中，就利用jQuery把<img>的src属性替换为data-src的内容，浏览器就会实时加载。
JavaScript代码如下：
$(function() {
var $window = $(window);
var lazyImgs = _.map($('img[data-src]').get(), function (i) {
return $(i);
});
var onScroll = function() {
var wtop = $window.scrollTop();
if (lazyImgs.length > 0) {
var wheight = $window.height();
var loadedIndex = [];
_.each(lazyImgs, function ($i, index) {
if ($i.offset().top - wtop < wheight) {
$i.attr('src', $i.attr('data-src'));
loadedIndex.unshift(index);
}
});
_.each(loadedIndex, function (index) {
lazyImgs.splice(index, 1);
});
}
};
$window.scroll(onScroll);
onScroll();
onScroll()函数最后要手动触发一次，因为页面显示时，并未触发scroll事件。如果图片已经在可视区域内，这些图片仍然是loading状态，需要手动触发一次，就可以正常显示。
要测试图片懒加载效果，可以在Chrome浏览器的控制台选择“Network”，把“Online”改为“Slow 3G”就可以模拟慢速网络下浏览器懒加载图片的效果：
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
