php预加载图片,html+js实现图片预加载（异步加载）

在前端设计时，为了让某县页面的图片即使缓存到浏览器中，一般使用预加载技术，但更为确切的应该称为异步加载，因为对线程不会造成阻塞。

核心代码

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")||img.complete==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")||img.complete==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 = ‘http://web.2008php.com/2014_Website_appreciate/2014-10-31/20141031133134.jpg‘;

loadImage(‘display_images‘,s,loadResult);

注意：这种用法过于简单，没有发挥出性能，请读者自行改造后，预加载20张1024*780图片，然后自动播放。如果是预加载的，播放时看不见卡顿或显示不完全的现象。

try doing it.

原文：http://my.oschina.net/ososchina/blog/339982