首页 > 代码库 > 图片预加载
图片预加载
/*
我们经常会用下载软件下载电视剧，一个电视剧可以能有N集。
1.先把所所有的集数全部下载完成，然后一个个开开心心的看。你真的开心吗？
2.我们先下一集，然后看完，看完以后再去下下一集，然后再看。
3.我们先下第一集，下载完成以后，再看第一集的时候去下载后面的内容，这样，我们可以在看前面的内容的时候，把后面的下完了，节约了很多的时间
在页面刚打开的时候，我们去加载第一张图片，然后页面加载完成以后，在用户看的时间内，去加载后面的内容，那么我们必须有个工具（迅雷） -> Image对象
*/
/*
属性：
src : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到了浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。
onload : 当资源加载完成的时候触发
onerror : 当资源加载失败的时候触发
*/
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>7.图片预先加载</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-12 -->10 <script>11 12 13 window.onload=function(){14 15 var oImg1=document.getElementsByTagName(‘img‘)[0];16 var oImage= new Image();17 oImage.src=‘http://gb.cri.cn/mmsource/images/2014/08/11/0/5240451376502243632.jpg‘;18 oImage.onload=function(){19 alert(‘下载完成‘);20 };21 22 oImage.onerror=function(){23 alert(‘下载出错‘)24 }25 26 document.onclick=function(){27 oImg1.src=‘http://gb.cri.cn/mmsource/images/2014/08/11/0/5240451376502243632.jpg‘;28 }29 }30 </script>31 </head>32 <body>33 <img src=‘‘/ style="width:400px;">34 </body> 35 </html>
图片预加载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。