js图片加载

JavaScript037

js图片加载,第1张

1.onerror

2.onload

浏览器有缓存机制

加快资源访问速度 降低服务器压力

原理：

通过页面加载开始先给图片对象一个 占位图

将实际的图片属性放在自定义属性 data_url 里面

(1)方法 1 <script type="text/javascript ">var obj=new Image()obj.src="http://www. phpernote.com/uplo adfiles/editor/20110 7240502201179.jpg"obj.onload=function（）

  { alert('图片的宽度为: '+obj.width+'图片的 高度为:'+obj.height)document.getElemen tById("mypic").innner HTML="<img src='"+this.src+"' />"

}

</script>

<div id="mypic">onloadi ng......</div>

方法 2

<script type="text/javascript ">

var obj=new Image()obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg"

obj.onreadystatechange=function(){ if(this.readyState==" complete")  alert('图片的宽度为: '+obj.width+'图片的 高度为:'+obj.height)document.getElementById("mypic").innner HTML="<img src='"+this.src+"' />"

}

}

</script>

<div id="mypic">onloadi

将图片文件、JS文件与你的网页文件保存在同一文件夹中，然后去掉图片的路径即可。即修改中间的代码为：runimg.imgurl = [ "<img src=’T1t8eTXbBtXXXXXXXX-490-170.png‘ />", "<img src=‘T1OVOUXeNjXXXXXXXX.jpg’ />", "<img src=’T1J.9TXc8lXXXXXXXX.jpg‘ />"]