标签：
在移动端开发中，特别是涉及到 CSS3 动画的情况下，如果在页面加载过程中直接播放动画，我们会发现动画非常卡顿。观察一下，就会发现页面在边播放动画边加载图片，可能出现的情况就是图片还没加载完就动画就完了，这样的体验是不可忍受的。那么，我们可不可以在 CSS3 动画播放前先加载完图片呢？答案是肯定的，并且能解决刚才那个问题。直接上代码。
1，html 标签
在图片的加载过程中，可以先播放一个过渡动画，例如进度条或其它个性化动画。
<div class="loading" id="loading"> <div id="spinner" class="spinner"> <div class="bounce1" style=" background-image: url(‘img-path"></div> </div> <div class="inner"> <p class="loading_img" style="display: none;">Loading...</p> <p class="loading_rate" id="loading_rate">0%</p> </div> </div>
2, js 代码
1 /*图片预加载*/ 2 var load = document.getElementById(‘loading‘); 3 var imgPath = ‘imgs-path‘; // 存放图片的路径 4 var loadingPage = (function () { 5 var imgSources = [‘img1.png‘,‘img2.png‘,‘img3.jpg‘]; // 需要预加载的图片 6 for (var i = 0; i < imgSources.length; i++) { 7 imgSources[i] = (imgPath + imgSources[i]); 8 }; 9 var loadImage = function (path, callback) { 10 var img = new Image(); 11 img.onload = function () { 12 img.onload = null; 13 callback(path); 14 } 15 img.src = path; 16 } 17 18 var imgLoader = function (imgs, callback) { 19 var len = imgs.length, i = 0; 20 while (imgs.length) { 21 loadImage(imgs.shift(), function (path) { 22 callback(path, ++i, len); 23 }) 24 } 25 } 26 var rateNum = document.getElementById(‘loading_rate‘); 27 // var bar = document.getElementById(‘bar‘); 28 var percent = 0; 29 imgLoader(imgSources, function (path, curNum, total) { 30 percent = curNum / total; 31 //$("#pgs2").attr("value", Math.floor(percent * 212)); 32 33 rateNum.innerHTML = Math.floor(percent * 100) + ‘%‘; 34 if (percent == 1) { // 图片预加载完成后的回调函数 35 setTimeout(function () { 36 $(‘#loading‘).css(‘display‘, ‘none‘); 37 }, 500); 38 39 } 40 }); 41 })();
总结：图片预加载的技术点关键点是利用 onload 事件，以及对多个图片的处理方法和预加载完成百分比的处理思路也是值得借鉴的。
标签：
原文地址：http://www.cnblogs.com/byhyd/p/4528594.html
