图片的预先加载讲解：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 我们经常会用下载软件下载电视剧，一个电视剧可以能有N集。 9 1.先把所所有的集数全部下载完成，然后一个个开开心心的看。你真的开心吗？ 10 2.我们先下一集，然后看完，看完以后再去下下一集，然后再看。 11 12 3.我们先下第一集，下载完成以后，再看第一集的时候去下载后面的内容，这样，我们可以在看前面的内容的时候，把后面的下完了，节约了很多的时间 13 14 在页面刚打开的时候，我们去加载第一张图片，然后页面加载完成以后，在用户看的时间内，去加载后面的内容，那么我们必须有个工具（迅雷） -> Image对象 15 */ 16 17 window.onload = function() { 18 19 var oImg = document.getElementById('img1'); 20 21 var oImage = new Image(); 22 /* 23 属性： 24 src : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到了浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。 25 onload : 当资源加载完成的时候触发 26 onerror : 当资源加载失败的时候触发 27 */ 28 oImage.src = 'http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg'; 29 oImage.onload = function() { 30 alert('加载完成'); 31 32 document.onclick = function() { 33 oImg.src = 'http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg'; 34 } 35 } 36 37 /*oImage.onerror = function() { 38 alert('加载出错'); 39 }*/ 40 41 42 } 43 </script> 44 </head> 45 46 <body> 47 <img src="" id="img1" /> 48 </body> 49 </html>
图片的预先加载应用实例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #ul1 {margin: 100px auto 0; padding: 0;} 8 li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;} 9 img {width: 290px; height: 200px; display: block;} 10 </style> 11 <script> 12 window.onload = function() { 13 14 var oUl = document.getElementById('ul1'); 15 var aImg = oUl.getElementsByTagName('img'); 16 17 showImage(); 18 19 window.onscroll = showImage; 20 21 function showImage() { 22 23 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 24 25 for (var i=0; i<aImg.length; i++) { 26 27 if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) { 28 //alert(i); 29 aImg[i].src = aImg[i].getAttribute('_src'); 30 aImg[i].isLoad = true; 31 } 32 33 } 34 35 } 36 37 function getTop(obj) { 38 var iTop = 0; 39 while(obj) { 40 iTop += obj.offsetTop; 41 obj = obj.offsetParent; 42 } 43 return iTop; 44 } 45 46 } 47 </script> 48 </head> 49 50 <body> 51 <ul id="ul1"> 52 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 53 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 54 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 55 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 56 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 57 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 58 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 59 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 60 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 61 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 62 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 63 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 64 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 65 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 66 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 67 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 68 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 69 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 70 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 71 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 72 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 73 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 74 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 75 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 76 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 77 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 78 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 79 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 80 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 81 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 82 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 83 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 84 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 85 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 86 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 87 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 88 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 89 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 90 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 91 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 92 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 93 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 94 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 95 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 96 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 97 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 98 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 99 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 100 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 101 <li><img _src="img/1.jpg" src="img/white.JPG" /></li> 102 <li><img _src="img/2.jpg" src="img/white.JPG" /></li> 103 <li><img _src="img/3.jpg" src="img/white.JPG" /></li> 104 <li><img _src="img/4.jpg" src="img/white.JPG" /></li> 105 <li><img _src="img/5.jpg" src="img/white.JPG" /></li> 106 <li><img _src="img/6.jpg" src="img/white.JPG" /></li> 107 <li><img _src="img/7.jpg" src="img/white.JPG" /></li> 108 </ul> 109 </body> 110 </html>