图片的预加载

一、预加载作用：

   牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

二、实现方式：

1.用CSS实现预加载；   2.仅使用JavaScript实现预加载；    3.使用Ajax实现预加载。

常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

1. css实现：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } 

将图片加载到可视区外。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间

2.使用js

function preload() {
    		var img1=new Image();
    		var img2=new Image();
    		var img3=new Image();
			
    		img1.src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";
    		img2.src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg";
    		img3.src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg";

    	}
   	function addLoadEvent(func){
    			var oldload=window.onload;
    			if (typeof window.onload!= "function"){
    				window.οnlοad=func;
    			}else{
    				window.οnlοad=function(){
    					if (oldload) {
    						oldload();
    					}
    					func();
    				}
    			}
    	}

    	addLoadEvent(preload);

3.使用ajax

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};