之前一直以为图片预加载，图片懒加载是差不多的。其实差很多，出发点就不一样。。。。。下面说一下区别和突然想到的一个问题。
图片预加载：事先把图片就下载下来，当下次页面中需要用到这个图片的时候，就直接去读取缓存的图片
具体应用场景：一个轮播图，每次点击屏幕出现下一张图片，如果网速不大好的情况下，可能会加载的比较慢。所以会出现屏幕卡顿，白屏等情况。利用图片预加载将下一张图片提现缓存下来。这样点击下一张的时候就会读取缓存的图片，而不是发起一个新的http请求了。
原理
- 使用javascript中的
new Image()创建image对象 - 给这个image对象的src属性赋值，赋值的同时浏览器就会请求该图片资源。
- 当点击出先下一张时，如果下一张的src和刚刚的image对象的src值相同，就会去读取缓存。所以更加流畅了。
图片懒加载：当用户需要看到这一部分内容的时候才加载图片
具体应用场景举例：例如淘宝天猫等商品图片特别多，第一次打开页面的时候不可能把所有商品图片都加载出来，那样页面首屏会特别慢。于是首先只加载用户能看见的那一部分图片。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。这样省流量，并且首屏加载比较快。
原理：
- 所有的img都自定义一个data-src属性，名字可以随便取。这个属性放着该图片的地址，而且不给img添加src属性。因为添加了src属性即使为空，还是会有请求的。
- 当滑动到用户可以看见的部分之后，将img的data-src属性值赋值给img的src属性，这时候img才会去加载图片资源。
疑问：
上面的图片预加载中的new 出来的image直接赋值src属性就能够加载资源了，可是在jsonp中为什么还要把script标签append到页面中才会发起请求呢？在js中创建的script直接赋值src属性能不能立即发起请求？测试咯！
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var img = new Image();
img.src = './function.JPG';
img.onload = function(){
console.log('图片加载完毕');
}
setTimeout(function(){
console.log('10秒之后执行');
document.getElementsByTagName('body')[0].appendChild(img);
},10000)
/*
将下面的script标签的代码注释掉，上面的输出结果是
图片加载完毕
10s之后执行 ---> 这里等待了10s
*/
var script = document.createElement('script');
script.src = './zepto源码.js';
script.onload = function(){
console.log('script加载完毕');
}
setTimeout(function(){
console.log('10秒之后执行');
document.getElementsByTagName('body')[0].appendChild(script);
},10000)
/*
将上面的图片预加载的代码注释掉，下面的输出结果是
10s之后执行 ---> 这里等待了10s
script加载完毕
*/
}
</script>
</body>
</html>通过上面的测试，我们发现了使用document.createElement('script')创建出来的script标签给其src赋值之后并没有立即加载资源。而是等到添加到页面中才加载资源。 WHY？
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。