尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题,但有些情况下依然需要使用JS脚本的手段来实现图片预读。 以下是基于jQuery实现图片预读的方法(用jQuery只是为了方便,你也可以使用原生js或者其他类库),以下代码请放入js文件中或者 块里(事先请保证已加载jQuery类库):
function imagePreload(images){
var arr = [‘
‘];
$.each(images, function(i, data){
arr.push(‘![](‘+ data +’)’);
});
arr.push(‘
‘);
$(‘body’).append(arr.join(‘’));
}
调用的时候,使用以下代码:
var preloadImages = [], preloadDir = ‘./img/‘; //preloadDir为图片文件所在的路径
preloadImages.push(preloadDir + ‘a.jpg’); //这里的每一行添加一张图片,请自行修改图片文件名
preloadImages.push(preloadDir + ‘b.jpg’);
preloadImages.push(preloadDir + ‘c.jpg’);
imagePreload(preloadImages); //调用之前写的preload方法
如果不喜欢使用jQuery,那么可以将这个方法改写为:
function imagePreload(images){
var arr = [], elm = document.createElement(‘div’);
for(var i=0; i’);
}
elm.style.display =’none’;
elm.innerHTML = arr.join(‘’);
document.body.appendChild(elm);
}