图片预加载与懒加载

图片预加载

即提前把图片加载到浏览器中，保证了图片快速、无缝发布，
特别对canvas游戏的制作，能够给用户带来很好的用户体验。
实现：

	var resource = {
			chitang: 'image/chitang.jpg',
			niukou: 'image/niukou.jpg',
			shan: 'image/shan.jpg',
			snow: 'image/snow.jpg',
			timg:'image/timg.jpg',
			yang:'image/yang.jpeg'
		}
		//用一个变量承载加载好的图片
		var imgBox = {};
		var resourceLength = Object.keys(resource).length;
		//图片已加载的进度(图片张数)
		var alreadyLength = 0;
		console.log(resourceLength);
		for(var key in resource){
			imgBox[key] = new Image();
			imgBox[key].src = resource[key];
			imgBox[key].onload = function(){
				alreadyLength++;
				if(alreadyLength == resourceLength){
					console.log('图片预加载结束，可开始写页面啦');
				}
			};
		}

图片预加是否成功，可以在浏览器Network中查看是否有图片

图片懒加载

原理：用户看不到的地方先不加载需要的图片，而是在要展示图片的位置放一个‘占位’图片，
‘占位’图片很小。当用户下面滚动页面时，要出现在视口中的图片开始下载。
实现：

    //用户看不到的地方：
    <img src="占位图片路径" data-pic="真实图片路径" alt=""/>
    //用户看的见的地方：
    <img src="真实图片路径" alt="">

懒加载插件：
插件下载地址
插件使用方法：

1. 引入插件js文件，懒加载js文件依赖jQuery文件，所以需要在此文件前先引入jQuery文件
2. 代码：

  <img src="占位图片" data-original="真实图片路径" class="lazy" alt=""/>

	$(function(){
		$('.lazy').lazyload();
	})

“真实图片的路径”的属性必须是data-original，不然就不能实现懒加载，
懒加载插件还提供了一些参数，以满足一些特殊的需求(eg:提前一点加载图片、避免网络过慢时加载缓慢、加载隐形图片)
参考博客：jQuery懒加载插件 – jquery.lazyload.js简单调用;