jQuery的圖片延遲加載技術的應用

這篇文章主要講解了“jQuery的圖片延遲加載技術的應用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“jQuery的圖片延遲加載技術的應用”吧！

本文使用David DeSandro寫的一個頁面布局插件Masonry，該插件基于jQuery庫，提供很多參數和方法，可以根據不同的需求定制不同的效果。

XHMTL

首先是要引入jQuery庫和Masonry插件。

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.masonry.min.js"></script>

我們仿照新浪微博構建一個html頁面，DIV#container放置多個相同的DIV.photo。

<div id="container">         <div class="photo">            <a href="#"><img src="images/02.jpg" alt="" /></a>            <p><a href="#">菓小菓</a>：隨時都要賣，還要又又美味</p>         </div>         .....N個photo...   </div>

CSS

#container{width:780px; margin:10px auto}   .photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3;    background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;     border-radius:4px;}   .photo img{width:205px}   .photo p{line-height:20px; margin:4px auto}

jQuery

$(function(){     $('#container').masonry({       itemSelector : '.photo',       columnWidth : 247     });   });

調用masonry插件，配置參數itemSelector對應的是class為photo的div，columnWidth為247，columnWidth的值是由.photo的寬度+padding*2+margin*2+border*2得到的。

上面只介紹砌墻布局，接下來結合本文把圖片加載技術和滾屏加載技術進行介紹。

我們在瀏覽圖片量非常大的頁面時，像淘寶商城商品展示、必應圖片搜索這類網站，圖片的加載非常流暢，其中就應用了圖片延遲加載技術。本文講解Lazyload圖片加載插件，當我們打開頁面時，首先在屏幕可視區域加載完圖片，隨著向下滾動頁面，圖片會陸續加載，從而提升了頁面打開速度。

Lazyload是一款基于jQuery的插件，在要顯示大量圖片的頁面，圖片是按需加載的，只在瀏覽器可視區內加載圖片，當用戶使用滾動條下拉時，后面的圖片才會繼續加載，從某種意義上講，這種技術減少了服務器的負載。您可以到Lazyload官網下載***的版本：http://www.appelsiini.net/projects/lazyload。

XHTML

首先載入jquery庫和lazyload插件：

<script type="text/javascript" src="jquery.js"></script>   <script type="text/javascript" src="jquery.lazyload.js"></script>

在body中需要放置圖片的區域放置多個要顯示的圖片。圖片越多效果越明顯。

<img src="images/blank.gif" data-original="images/01.jpg" width="205" height="188" alt="" />

注意，每張圖片的src屬性對應的是一張預定義的圖片，就是再真正的圖片還沒加載的時候的替代圖片，我們通常使用1x1的blank.gif圖片。真正的圖片是由屬性data-original指定的，然后還需要設置圖片的寬度和高度。

jQuery

$(function(){     $("img").lazyload({          effect : "fadeIn"     });   });

和許多插件使用一樣，只需要在元素上調用lazyload()即可，現在你就可以看到效果了。Lazyload同樣提供了多個參數可設置不同的效果。

threshold：靈敏度，即可以通過設置靈敏度來控制圖片的加載，如設置為200，即200像素前加載圖片，默認為0，即到達圖片邊界時才加載。

event：綁定事件，即可以通過綁定click、mouseover或者任意自定義事件來觸發圖片的加載。默認是當用戶滾動到圖片窗口時觸發圖片加載。

effect：設置效果，即可以設置圖片加載時的特效，如fadeIn，默認是show。

您還可以設置一個容器里的圖片橫向或縱向滾動加載效果，不過這個用的少，詳情請查看lazyload官網：http://www.appelsiini.net/projects/lazyload

感謝各位的閱讀，以上就是“jQuery的圖片延遲加載技術的應用”的內容了，經過本文的學習后，相信大家對jQuery的圖片延遲加載技術的應用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！