本文本内容拷贝至：https://blog.csdn.net/xuanwuziyou/article/details/48199123
当一个网页中有大量图片时，浏览器会逐个去下载这些图片，等全部下载完毕再执行其它操作，而浏览器本身的http请求的最大并发数量（通常是2个，最多的也只是8个）又限制了全部图片完成下载的时间，这样网页的速度会很慢，导致很差的用户体验。
一个好的实践是当用户向下滚动页面时，在图片出现在用户的可视范围内的时候，去请求相应图片并加载，比如淘宝的页面，这样按需加载图片可省去不必要的带宽浪费（用户可能并不会浏览完本页的全部图片），同时让页面保持快速响应。
实现的原理很简单，就是对于<img>标签，先不要写上它的资源地址src（因为只要写上了，浏览器加载到这个img标签，就会去下载src指向的图片资源），可以把它的资源地址先写在一个临时属性里，下面用到的一段js（相当于一个js小插件）中写在了一个属性originalSrc里（这个属性叫啥都可以的），然后给<img>标签们绑定事件，这个事件就是判断其是否出现在了浏览器的当前显示区域，如果出现了，就把originalSrc指示的资源地址写给<img>标签的src，src写入后浏览器就会去下载图片资源，如此就实现了图片的延迟加载。
用到jquery.js文件和 lyz.delayLoading.min.js 文件（不知哪位牛人写的，学习了！）
<div>
<img originalSrc="images/img1.png"/>
<img originalSrc="images/img2.png"/>
<img originalSrc="images/img3.png"/>
<img originalSrc="images/img4.png"/>
<img originalSrc="images/img5.png"/>
<img originalSrc="images/img6.png"/>
</div>
<script src="js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<script>
$(function () {
$("img").delayLoading({
defaultImg: "images/loading.png", // 预加载前显示的图片
errorImg: "", // 读取图片错误时替换图片(默认：与defaultImg一样)
imgSrcAttr: "originalSrc",//记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc)
beforehand: 0, // 预先提前多少像素加载图片(默认：0)
event: "scroll", // 触发加载图片事件(默认：scroll)
duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"
container: window, // 对象加载的位置容器(默认：window)
success: function (imgObj) { }, // 加载图片成功后的回调函数(默认：不执行任何操作)
error: function (imgObj) { } // 加载图片失败后的回调函数(默认：不执行任何操作)
});
});
</script>