在頁面上圖片比較多的時候，打開一張頁面必然引起與服務器大數據量的交互。尤其是對於高清晰的圖片，占的幾M的空間呢~
這里要實現的功能：可見頁面的圖片是加載的，而不可見頁面通過滾動條下拉可見，這也叫做“ImageLazyLoad技術”，需要用到延遲加載的jQuery插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圖片加載技術實例-歡迎關注tinyphp的博客</title> <SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT> <script type="text/javascript" charset="utf-8"> $(function() { $("img").lazyload({ placeholder : "images/loading.gif", effect: "fadeIn" }); }); </script> <style> img a,img{border:0px;} div{ margin-bottom:10px;} </style> </head> <body> <img src="images/0.jpg" /><br /> <div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div> <div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div> </body> </html>
jquery下載個較新的庫就可以了，
jquery.lazyload.js的說明：
http://www.appelsiini.net/projects/lazyload
下載地址:
原版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
縮減版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
效果如：
隨着滾動條往下拉，下面圖片漸變顯示
其他相關：jquery官網解說
http://blog.wpjam.com/article/jquery-lazyload-js/