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();
		img.onload = function(){
			if(loadImgIndex == len-1){
				callback();
			}else{
				loadImgIndex++;
				console.log('图片已经加载：' + Math.floor(loadImgIndex/len*100) + '%');
				loading();
			}
		}
		img.src = path + arr[loadImgIndex];
		img.onerror = function(){
			console.log('加载失败');
			setTimeout(callback,1000);
		}
	})();
}

此段代码是在SeaJS环境下的define中定义的