圖片預加載－互聯網 - 大數據

文章出處

圖片預加載功能

圖片預加載技術簡介---這是迅雷官網的源代碼的一句，在img里面有一個src屬性，這里放的是代替的圖片，大小為1px*1px，其實就相當于是沒有這個圖片，另外的一個_src才是真實的圖片地址（自定義屬性）。當鼠標向下滾動時，加載真實的圖片，利用Js里的onscroll事件判斷。

1 <img alt="花開半夏" src="http://images.movie.xunlei.com/img_default.gif" _src="http://img2.kankan.kanimg.com/gallery2/block/2013/12/03/f2163d024767a0a8bf39bb2dbb56e37b.jpg">

圖片預加載策略：預判加載（預判前一張/后一張圖片）、延遲加載（先加載HTML，然后再加載頁面圖片）

onload和onerror判斷圖片加載情況：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>圖片預加載</title>
 6 <script>
 7 window.onload=function ()
 8 {
 9     var oImg=new Image();
10     
11     oImg.onload=function ()
12     {
13         alert('圖片預加載完成');
14     };
15     oImg.onerror=function ()
16     {
17         alert('失敗');
18     };
19     oImg.src='http://pic25.nipic.com/20121126/668573_145010549116_2.jpg';
20 };
21 </script>
22 </head>
23 
24 <body>
25 <img width="400" height="300" src="http://www.duose.com/p/2007/0405/46516_046875.jpg" onmouseover="this.src='http://pic25.nipic.com/20121126/668573_145010549116_2.jpg';" onmouseout="this.src='http://www.duose.com/p/2007/0405/46516_046875.jpg';" />
26 </body>
27 </html>

Mac電腦菜單效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 body {margin:0;}
 6 #div1 {width:100%; position:absolute; bottom:0; text-align:center;}
 7 </style>
 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 9 <title>無標題文檔</title>
10 <script>
11 document.onmousemove=function (ev)
12 {
13     var oEvent=ev||event;//事件對象
14     var oDiv=document.getElementById('div1');
15     var aImg=document.getElementsByTagName('img');
16     var aTxt=document.getElementsByTagName('input');
17     var i=0;
18     
19     for(i=0;i<aImg.length;i++)//循環所有的元素
20     {
21         var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
22         //offsetLeft正確，計算圖片中心點的距離，所以加上本身的一半-------圖片中心點距離可視區邊緣的距離
23         var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2;
24         //offsetTop計算該元素距離父級元素的距離，所以要加上父級元素的offsetTop
25         var a=x-oEvent.clientX;
26         var b=y-oEvent.clientY;
27         
28         var dis=Math.sqrt(a*a+b*b);//開平方，或者使用pow(a,2)+pow(b,2)進行開平方
29         var scale=1-dis/300;//本來是dis/100;但是使用1-dis/100的話，比例更加有效
30         if(scale<0.5)//如果，比例小于50%；強行的讓比例等于50%
31         {
32             scale=0.5;
33         }
34         aImg[i].width=scale*128;//scale最大可能是1
35         aTxt[i].value=scale.toFixed(2);//toFixed()函數保留兩位小數
36     }
37 };
38 </script>
39 </head>
40 
41 <body>
42 <input type="text" />
43 <input type="text" />
44 <input type="text" />
45 <input type="text" />
46 <input type="text" />
47 <div id="div1">
48     <img src="images/1.png" width="64" />
49     <img src="images/2.png" width="64" />
50     <img src="images/3.png" width="64" />
51     <img src="images/4.png" width="64" />
52     <img src="images/5.png" width="64" />
53 </div>
54 </body>
55 </html>