圖片適當(dāng)載入漸顯特效，基于jQuery.Lazyload

來說明一下“圖片適當(dāng)載入漸顯特效”，就是當(dāng)即將瀏覽到有圖片的地方，那張圖片才開始自動(dòng)加載，當(dāng)然不是突然加載上去，而是漸顯效果的加載起來，讓瀏覽者感覺不是那么生硬。這樣的好處就是可以加快訪問速度和節(jié)省流量，因?yàn)楹芏酁g覽者說不定只是想看一下內(nèi)容，或者根本看不完內(nèi)容，這樣他沒看到的圖片就不會(huì)顯示。而且這樣也不用擔(dān)心瀏覽者會(huì)看不到圖片，因?yàn)樵诩磳g覽到圖片的時(shí)候，圖片會(huì)自動(dòng)漸顯的加載。

呵呵很帥吧，來看看怎么實(shí)現(xiàn)的吧，加速度和省流量，何樂而不為呢。

這個(gè)圖片適當(dāng)載入漸顯特效是海天在HZLZH博友那看到的，海天感覺很不錯(cuò)，就載了過來，可以讓更多朋友看到，順便備份下，呵呵。

特效優(yōu)點(diǎn)：
1、不會(huì)全部加載頁面所有圖片，加快頁面載入速度；
2、圖片加載漸顯效果，圖片顯示方式不生硬；
3、代碼精簡(jiǎn)，便于操作維護(hù)，JS代碼僅僅 1.6KB ，當(dāng)然前提是你的先加載jQuery庫。注意：這里不能用GOOGLE的mini 1.3.2版的jQ庫；

原理嘛，上面海天已經(jīng)簡(jiǎn)單說過了，特效是判斷了是否瀏覽到圖片，如果沒有則加載fill.gif（43字節(jié)），當(dāng)瀏覽者鼠標(biāo)滾動(dòng)快要到圖片地方，則自動(dòng)加載圖片，并以漸顯效果顯示,這樣的顯示效果對(duì)用戶體驗(yàn)也有一定的提高。也就是說如果瀏覽者打開后瞬間關(guān)閉，屏幕上沒有顯示的圖片是不會(huì)加載的，這樣速度和流量肯定是節(jié)省不少的了，特別是那些圖片博客。海天已經(jīng)測(cè)試過，在瀏覽到圖片之前，圖片是不會(huì)被加載的。

方法：
1、下載jquery.lazyload.js （1.6K）和 預(yù)填充圖片 fill.gif（ 43字節(jié)） 
2、當(dāng)然是上傳到網(wǎng)站目錄，例如http://blog./up/
3、在header.php頂部適當(dāng)位置添加以下代碼：

<script type="text/javascript" src="http://blog./up/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : "http://blog./up/fill.gif",
     effect      : "fadeIn"
});
});
</script>

代碼中，紅色部分可以換成你想要使用特效的圖片，默認(rèn)是全站圖片使用。
綠色的<script>中的jQ可以加載到你網(wǎng)站中原有jQ特效js文件。

注意！！本文中使用的jQ庫不能使用google的1.3.2版的mini的jQ庫，1.4.2到是可以使用，不過太新太大，海天不推薦使用。海天推薦使用WordPress自帶的jQ庫，文件位于：/wp-includes/js/jquery/jquery.js。
調(diào)用方法：

<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>

到底顯示的效果是什么樣子的，大家可以用鼠標(biāo)向下滾動(dòng)，接著向下，到評(píng)論位置，那評(píng)論者的頭像顯示效果就是啦，效果不錯(cuò)吧。再給大家多圖的文章，讓大家慢慢觀賞。
GOOGLE在香港的新家，程序員夢(mèng)想的工作環(huán)境