jQuery圖片延遲加載技術的應用
我們使用新浪微博的時候，在“微博精選”頁面里可以看到大量的微博信息。該頁面信息主要是以圖片配文字說明，頁面使用了自適應網(wǎng)格布局即砌墻效果，圖片加載技術，以及滾動加載內(nèi)容技術。本文先介紹砌墻效果。
其實我們做頁面布局就相當于砌墻師傅在完成一堵墻的施工。我們在設計頁面的時候，假如有很多相同的DIV，裝載不同的內(nèi)容，這些DIV都使用float：left，如果不限制這些DIV的高度，頁面布局可能會出現(xiàn)砌墻架空的現(xiàn)象。點擊這里查看效果，而經(jīng)過布局優(yōu)化后的頁面布局效果大不一樣，請看DEMO。
本文使用David DeSandro寫的一個頁面布局插件Masonry，該插件基于jQuery庫，提供很多參數(shù)和方法，可以根據(jù)不同的需求定制不同的效果。
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
- });
- });
調(diào)用masonry插件，配置參數(shù)itemSelector對應的是class為photo的div，columnWidth為247，columnWidth的值是由.photo的寬度+padding*2+margin*2+border*2得到的。
上面只介紹砌墻布局，接下來結合本文把圖片加載技術和滾屏加載技術進行介紹。
#p#
我們在瀏覽圖片量非常大的頁面時，像淘寶商城商品展示、必應圖片搜索這類網(wǎng)站，圖片的加載非常流暢，其中就應用了圖片延遲加載技術。本文講解Lazyload圖片加載插件，當我們打開頁面時，首先在屏幕可視區(qū)域加載完圖片，隨著向下滾動頁面，圖片會陸續(xù)加載，從而提升了頁面打開速度。
Lazyload是一款基于jQuery的插件，在要顯示大量圖片的頁面，圖片是按需加載的，只在瀏覽器可視區(qū)內(nèi)加載圖片，當用戶使用滾動條下拉時，后面的圖片才會繼續(xù)加載，從某種意義上講，這種技術減少了服務器的負載。您可以到Lazyload官網(wǎng)下載***的版本：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中需要放置圖片的區(qū)域放置多個要顯示的圖片。圖片越多效果越明顯。
- <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"
- });
- });
和許多插件使用一樣，只需要在元素上調(diào)用lazyload()即可，現(xiàn)在你就可以看到效果了。Lazyload同樣提供了多個參數(shù)可設置不同的效果。
threshold：靈敏度，即可以通過設置靈敏度來控制圖片的加載，如設置為200，即200像素前加載圖片，默認為0，即到達圖片邊界時才加載。
event：綁定事件，即可以通過綁定click、mouseover或者任意自定義事件來觸發(fā)圖片的加載。默認是當用戶滾動到圖片窗口時觸發(fā)圖片加載。
effect：設置效果，即可以設置圖片加載時的特效，如fadeIn，默認是show。
您還可以設置一個容器里的圖片橫向或縱向滾動加載效果，不過這個用的少，詳情請查看lazyload官網(wǎng)：http://www.appelsiini.net/projects/lazyload
