JS预先加载图片

JS预先加载图片

一个H5游戏，用户在点击某个元素后才会触发事件，显示一张背景图background-image，由于图片并没有在页面加载时渲染，导致了前几次的用户操作，图片显示会出现卡顿的状况，用户体验不好，想到了几种解决方案：

1、使用prefetch预加载技术，即在head中添加<link rel="prerender prefetch" href="#" />指向需要预先加载的图片，试了下，感觉并没有什么用

2、在页面上加几个image标签，设置为隐藏状态，页面加载时会将其隐藏的元素也渲染出来，这种方法并不是很好

3、js控制预先加载，通过回调函数去操作加载完成后的事件

//加载图片
var loadImgIndex = 0,path = 'images/';
exports.loadImg = function(arr,callback){var len = arr.length,callback = callback || function(){};if(!len){return;}(function loading(){var img = new Image();load = function(){if(loadImgIndex == len-1){callback();}else{loadImgIndex++;console.log('图片已经加载：' + Math.floor(loadImgIndex/len*100) + '%');loading();}}img.src = path + arr[loadImgIndex];r = function(){console.log('加载失败');setTimeout(callback,1000);}})();
}