实现图片预加载

使用css中的background的属性

• 通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在WEB页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。
• 缺点：由于CSS是同页面的其他内容一起加载，这也就意味着增加了页面的整体加载时间。

使用js中的 new Image()方法（推荐）

• 步骤1、使用new Image()动态的创建img

  var newImg = new Image();

• 步骤2、设置其src为要加载的图片，来实现预载。

  newImg.src = './1.jpg';//路径

• 步骤3、使用onload方法回调预载完成事件

  window.addEventListener('load',function(){
  //调用预加载函数
  })

• 完整示例：

  function preloadImg(){
  	var loadImg = []; // 创建一个数组，
  	// 通过push方法，将图片路径添加进数组
  	loadImg.push('1.jpg');
  	loadImg.push('2.jpg');
  	loadImg.push('2.jpg');
  	//遍历数组    执行上述步骤1和步骤2
  	for(var i=0;i<loadImg.length;i++){
  	var newImg = new Image();
  	   newImg.src = loadImg[i];
  	}
  }
  //步骤3
  window.addEventListener('load',function(){
  //调用预加载函数
  	preloadImg()
  })