【前端】图片预加载与懒加载（未完成）

图片预加载与懒加载

图片预加载

图片预加载就是图片提前加载，可以保证图片快速、无缝的发布，用户需要查看时可直接从本地缓存中渲染。

图片预加载的实现方法有很多，可以通过css、JavaScript、Ajax等方法实现。

• CSS方法

  通过background加载图片，但是设置定位在窗口可见区域外（使其不可见）

  /*CSS - preLoad Image*/
  #preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }
  #preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }
  

• JavaScript

通过newImage = new Image()、newImage.src="imageSrc"实现

function preLoadImage( images ){
	let isArray = images instanceof Array;
	if( isArray ){
		let preLoad = [];
		for(let i=0,l=images.length;i<l;i++){
			preLoad[i] = new Image();
			preLoad[i].src = images[i];
		}
		return true;
	} else if( typeof(images) == 'string' ) {
		let preLoad = new Image();
		preLoad.src = images;
		return true;
	} else {
		throw new TypeError("parma must be Array or string");
		return false;
	}
}

在实际操作中，需要对图片加载增加加载成功或者加载失败的提示，往往需要通过Image.onload()、Image.onerror()进行监听。

• Ajax

  Ajax预加载图片是使用了XMLHttpRequest()对象，对图片进行预加载。

  // 封装方法参考上面new Image();
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'xxx.jpg');
  xhr.send('');
  

图片懒加载