jQuery的圖片延遲加載技術(shù)的應(yīng)用

這篇文章主要講解了“jQuery的圖片延遲加載技術(shù)的應(yīng)用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“jQuery的圖片延遲加載技術(shù)的應(yīng)用”吧！

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

XHMTL

首先是要引入jQuery庫(kù)和Masonry插件。

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

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

<div id="container">         <div class="photo">            <a href="#"><img src="images/02.jpg" alt="" /></a>            <p><a href="#">菓小菓</a>：隨時(shí)都要賣，還要又又美味</p>         </div>         .....N個(gè)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對(duì)應(yīng)的是class為photo的div，columnWidth為247，columnWidth的值是由.photo的寬度+padding*2+margin*2+border*2得到的。

上面只介紹砌墻布局，接下來(lái)結(jié)合本文把圖片加載技術(shù)和滾屏加載技術(shù)進(jìn)行介紹。

我們?cè)跒g覽圖片量非常大的頁(yè)面時(shí)，像淘寶商城商品展示、必應(yīng)圖片搜索這類網(wǎng)站，圖片的加載非常流暢，其中就應(yīng)用了圖片延遲加載技術(shù)。本文講解Lazyload圖片加載插件，當(dāng)我們打開(kāi)頁(yè)面時(shí)，首先在屏幕可視區(qū)域加載完圖片，隨著向下滾動(dòng)頁(yè)面，圖片會(huì)陸續(xù)加載，從而提升了頁(yè)面打開(kāi)速度。

Lazyload是一款基于jQuery的插件，在要顯示大量圖片的頁(yè)面，圖片是按需加載的，只在瀏覽器可視區(qū)內(nèi)加載圖片，當(dāng)用戶使用滾動(dòng)條下拉時(shí)，后面的圖片才會(huì)繼續(xù)加載，從某種意義上講，這種技術(shù)減少了服務(wù)器的負(fù)載。您可以到Lazyload官網(wǎng)下載***的版本：http://www.appelsiini.net/projects/lazyload。

XHTML

首先載入jquery庫(kù)和lazyload插件：

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

在body中需要放置圖片的區(qū)域放置多個(gè)要顯示的圖片。圖片越多效果越明顯。

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

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

jQuery

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

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

threshold：靈敏度，即可以通過(guò)設(shè)置靈敏度來(lái)控制圖片的加載，如設(shè)置為200，即200像素前加載圖片，默認(rèn)為0，即到達(dá)圖片邊界時(shí)才加載。

event：綁定事件，即可以通過(guò)綁定click、mouseover或者任意自定義事件來(lái)觸發(fā)圖片的加載。默認(rèn)是當(dāng)用戶滾動(dòng)到圖片窗口時(shí)觸發(fā)圖片加載。

effect：設(shè)置效果，即可以設(shè)置圖片加載時(shí)的特效，如fadeIn，默認(rèn)是show。

您還可以設(shè)置一個(gè)容器里的圖片橫向或縱向滾動(dòng)加載效果，不過(guò)這個(gè)用的少，詳情請(qǐng)查看lazyload官網(wǎng)：http://www.appelsiini.net/projects/lazyload

感謝各位的閱讀，以上就是“jQuery的圖片延遲加載技術(shù)的應(yīng)用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)jQuery的圖片延遲加載技術(shù)的應(yīng)用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！