图片预加载 解决图片加载闪动问题
方法一：
<script type="text/javascript"> var img01 = new Image(); var img02 = new Image(); var img03 = new Image(); var img04 = new Image(); img01.src = "img/1.jpg"; img02.src = "img/2.jpg"; img03.src = "img/3.jpg"; img04.src = "img/4.jpg"; </script>
缺点：如果加载图片较多，比较麻烦
方法二：
var images = new Array(); function preLoad() { for (var i = 0; i < preLoad.arguments.length; i++) { imgs[i] = new Image(); imgs[i].src = preLoad.arguments[i]; } } preLoad("img/1.jpg", "img/2.jpg", "img/3.jpg");
学到的小知识：arguments:由当前函数传入参数组成，用法与数组类似
方法三：ajax实现，使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
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); };
上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。
JavaScript来实现该加载过程：
window.onload = function() { setTimeout(function() { // reference to <head> var head = document.getElementsByTagName('head')[0]; // a new CSS var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href = "http://domain.tld/preload.css"; // a new JS var js = document.createElement("script"); js.type = "text/javascript"; js.src = "http://domain.tld/preload.js"; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };
这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。
加载完毕回调
function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.src = url; if (img.complete) { //如果图片已经存在于浏览器缓存，直接调用回调函数 callback.call(img); return; // 直接返回，不用再处理onload事件 } img.onload = function() { // 图片下载完毕时异步调用callback函数。 callback.call(img); // 将回调函数的this替换为Image对象 }; };
