天天看點

Jquery 圖檔延遲加載技術

參考網址: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版本以上

所加載的圖檔,必須設定他的高和寬。

最後,通過一個簡單的例子加以示範:

示例代碼如下:

Jquery 圖檔延遲加載技術
Jquery 圖檔延遲加載技術

View Code

示例網址:http://www.huaxuancch.com/index.html

JQ版本下載下傳:http://www.jq22.com/jquery-info122

示範截圖,請打開示例網址,

Jquery 圖檔延遲加載技術

由上圖可知,網址初步僅僅隻加載兩張圖檔。

然後........

我們滑動滑鼠滑輪.........

Jquery 圖檔延遲加載技術

每滑到一張圖檔,就會自主加載。

這樣的方式,避免了一次性加載所有圖檔,使網站打開速度大增。同時,也不會影響使用!

@陳卧龍的部落格 

付婷,你還那麼胖嗎?如果胖,就減肥肥吧。