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

浏览数：55 / 时间：2015年06月09日

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

核心代码

<script type="text/javascript">
		
  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;
}
</script>

深情的测试一下吧。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>异步（预加载）加载图片</title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1.0" />
	</head>
	<body>
		
 <img src="loading.gif" id="display_images">
<script type="text/javascript">
		
  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);
</script>
	</body>
</html>

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

try doing it.

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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