Jquery 圖片延遲加載技術
阿新 • • 發佈：2017-06-21
簡單的 logs lan opened 我們 參考 pla itl one 
參考網址：http://code.ciaoca.com/jquery/lazyload/
延遲加載能大大增加你網站的加載速度！
需要引入以下文件<Jq文件也是少不了的>：
<script src="~/Content/demo/jquery.lazyload.js"></script>
<script src="~/Content/demo/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(‘img‘).lazyload();
</script>
這些JQ文件的下載地址：http://code.ciaoca.com/jquery/lazyload/
官方網址：http://appelsiini.net/projects/lazyload/
建議將這些JQ文件引用放在HTML 文檔的最下面，這句話很重要。
所引用的JQ文件必須在1.4版本以上
所加載的圖片，必須設置他的高和寬。
最後，通過一個簡單的例子加以示範：
示例代碼如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"View Codecontent="text/html; charset=utf-8" /> <title></title> <style type="text/css"> img { height:800px; width:500px; } </style> </head> <body> <img src="images/grey.gif" data-original="images/1.jpg" /><br /> <img src="images/grey.gif"data-original="images/2.jpg" /><br /> <img src="images/grey.gif" data-original="images/3.jpg" /><br /> <img src="images/grey.gif" data-original="images/4.jpg" /><br /> <img src="images/grey.gif" data-original="images/5.jpg" /><br /> <img src="images/grey.gif" data-original="images/6.jpg" /><br /> <img src="images/grey.gif" data-original="images/7.jpg" /><br /> <img src="images/grey.gif" data-original="images/8.jpg" /><br /> <img src="images/grey.gif" data-original="images/9.jpg" /><br /> <img src="images/grey.gif" data-original="images/10.jpg" /><br /> <img src="images/grey.gif" data-original="images/11.jpg" /><br /> <img src="images/grey.gif" data-original="images/12.jpg" /><br /> <img src="images/grey.gif" data-original="images/13.jpg" /><br /> <img src="images/grey.gif" data-original="images/14.jpg" /><br /> <img src="images/grey.gif" data-original="images/15.jpg" /><br /> <img src="images/grey.gif" data-original="images/16.jpg" /><br /> <img src="images/grey.gif" data-original="images/17.jpg" /><br /> <img src="images/grey.gif" data-original="images/18.jpg" /><br /> <img src="images/grey.gif" data-original="images/19.jpg" /><br /> <img src="images/grey.gif" data-original="images/20.jpg" /><br /> <img src="images/grey.gif" data-original="images/21.jpg" /><br /> <img src="images/grey.gif" data-original="images/1.jpg" /><br /> <img src="images/grey.gif" data-original="images/2.jpg" /><br /> <img src="images/grey.gif" data-original="images/3.jpg" /><br /> <img src="images/grey.gif" data-original="images/4.jpg" /><br /> <img src="images/grey.gif" data-original="images/5.jpg" /><br /> <img src="images/grey.gif" data-original="images/6.jpg" /><br /> <img src="images/grey.gif" data-original="images/7.jpg" /><br /> <img src="images/grey.gif" data-original="images/8.jpg" /><br /> <img src="images/grey.gif" data-original="images/9.jpg" /><br /> <img src="images/grey.gif" data-original="images/10.jpg" /><br /> <img src="images/grey.gif" data-original="images/11.jpg" /><br /> <img src="images/grey.gif" data-original="images/12.jpg" /><br /> <img src="images/grey.gif" data-original="images/13.jpg" /><br /> <img src="images/grey.gif" data-original="images/14.jpg" /><br /> <img src="images/grey.gif" data-original="images/15.jpg" /><br /> <img src="images/grey.gif" data-original="images/16.jpg" /><br /> <img src="images/grey.gif" data-original="images/17.jpg" /><br /> <img src="images/grey.gif" data-original="images/18.jpg" /><br /> <img src="images/grey.gif" data-original="images/19.jpg" /><br /> <img src="images/grey.gif" data-original="images/20.jpg" /><br /> <img src="images/grey.gif" data-original="images/21.jpg" /><br /> </body> </html> <script src="Scripts/jquery-3.1.1.js"></script> <script src="Scripts/jquery-3.1.1.min.js"></script> <script src="Scripts/jquery.lazyload.js"></script> <script src="Scripts/jquery.lazyload.min.js"></script> <script type="text/javascript"> $(‘img‘).lazyload(); </script>
示例網址：http://www.huaxuancch.com/index.html
JQ版本下載：http://www.jq22.com/jquery-info122
演示截圖，請打開示例網址，
由上圖可知，網址初步僅僅只加載兩張圖片。
然後........
我們滑動鼠標滑輪.........
每滑到一張圖片，就會自主加載。
這樣的方式，避免了一次性加載所有圖片，使網站打開速度大增。同時，也不會影響使用！
@陳臥龍的博客
Jquery 圖片延遲加載技術