圖片適當載入漸顯特效，基于jQuery.Lazyload

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

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

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

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

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

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

<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>

代碼中，紅色部分可以換成你想要使用特效的圖片，默認是全站圖片使用。
綠色的<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>

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