在前端设计时,为了让某县页面的图片即使缓存到浏览器中,一般使用预加载技术,但更为确切的应该称为异步加载,因为对线程不会造成阻塞。
核心代码
function loadImage(id,src,callback)
{
var img = new window.Image();
//当图片成功加载到浏览器缓存
img.onload =function(evt)
{
if(typeof(img.readyState)=='undefined')
{
img.readyState = 'undefined';
}
//在IE8以及以下版本中需要判断readyState而不是complete
if ((img.readyState=='complete'||img.readyState=="loaded")||plete==true)
{
callback({'msg':'ok','src':src,'id':id});
}else{
img.onreadystatechange(e);
}
};
img.onerror = function(evt)
{
callback({'msg':'error','id':id});
}
img.onreadystatechange = function(e)
{
//次方法只有IE8以及一下版本会调用
}
img.src=src;
}
深情的测试一下吧。
html>
异步(预加载)加载图片
function loadImage(id,src,callback)
{
var img = new window.Image();
//当图片成功加载到浏览器缓存
img.onload =function(evt)
{
if(typeof(img.readyState)=='undefined')
{
img.readyState = 'undefined';
}
//在IE8以及以下版本中需要判断readyState而不是complete
if ((img.readyState=='complete'||img.readyState=="loaded")||plete==true)
{
callback({'msg':'ok','src':src,'id':id});
}else{
img.onreadystatechange(e);
}
};
img.onerror = function(evt)
{
callback({'msg':'error','id':id});
}
img.onreadystatechange = function(e)
{
//次方法只有IE8以及一下版本会调用
}
img.src=src;
}
var loadResult = function(data)
{
data = data ||{} ;
if(typeof(data.msg)!='undefined')
{
if(data.msg=='ok')
{
//这里使用了id获取元素,有点死板,建议使用这自行改造吧
document.getElementById(''+data.id).src=data.src;//这里从缓存读取数据
}else{
//这里图片加载失败,我们可以显示其他图片,防止大红叉
document.getElementById(''+data.id).src='unload.png';
}
}
}
var s = '外链网址已屏蔽';
loadImage('display_images',s,loadResult);
注意:这种用法过于简单,没有发挥出性能,请读者自行改造后,预加载20张1024*780图片,然后自动播放。如果是预加载的,播放时看不见卡顿或显示不完全的现象。
try doing it.