jquery外掛《Lazy loader》延遲圖片加載,痞客邦及Blogger也可使用

最近在一些網站上看到一個圖片效果,是用來延遲加載圖片的功用,主要並不是減少流量,而是降低主機瞬間負載,特別是圖片爆多的網站,如果一頁有20張圖片,一次開啟完的話不僅訪客開的很累,對網站主機也是一種負荷,因此我們可以加上一支簡單的jquery外掛《Lazy loader》來延遲圖片開啟,當訪客往下拉到圖片位置時再去讀取圖片,非常建議圖片量大的網站加載。

最下方有痞客邦及Blogger加載的方式,無名沒意外應該是不能使用,尚未測試,有興趣的人可以依痞客邦的方式加載試試是否有效果。

Lazy loader:

網站位址:http://www.appelsiini.net/projects/lazyload
jquery外掛下載:請點我
效果展示:http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

安裝方式:

如果你的網站是Wordpress架設,下載jquery外掛後解壓縮上傳到你的佈景資料夾裡,在你的header.php裡的</head>之前加入以下語法,即可使用:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lazyload.mini.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){

  jQuery("img").lazyload({

    effect:"fadeIn",

    placeholder: "https://steachs.com/d/files/grey.gif"

  });

});

</script>

 

如果你網站是其它像是Discuz或是joomla,甚至是自己撰寫的網站,只要將上列語法修改為你放置lazyload.mini.js的路徑即可,也就是下面這一行。

<script type="text/javascript" src="你放置的路徑/lazyload.mini.js"></script>

 

痞客邦或是Blogger用戶加載方法:

痞客邦用戶請在側邊欄新增一個版面,在自訂內容裡輸入以下語法即可。

Blogger用戶則是在側邊欄新增一個Html/Javascript欄位,再加入以下語法即可。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="https://steachs.com/d/files/lazyload.mini.js"></script>

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

17 個留言

  1. Avatar akw28888表示:

    發現阿湯網站有點怪怪的
    就是啊 廣告都會檔到文章…

    阿湯說:

    哪邊??

  2. Avatar 如雲表示:

    喵嗚~
    ㄚ湯哥哥有沒有可以把廣告最後載入的語法啊!
    我試了幾個網路上教學的都沒效
    不知道是不是我放的方式不對orz…

    謝謝^^

    阿湯說:

    有是有~但不太建議就是~

  3. Avatar Toro表示:

    物件不支援此屬性或方法= =

    有辦法可以支援到

    jquery-1.4.2.min.js

    這個嗎??

    因為我網頁有崁入 jquery-1.4.2.min.js

    阿湯說:

    要自己改囉

  4. Avatar momo表示:

    請問放在佈景資料夾的js資料夾裡面嗎? Q_Q
    還是放哪裡都可以? 謝謝!

    阿湯說:

    直接放到佈景資料夾下,不用再丟到js裡,或是直接用用最下方的給blogger用的也可以

  5. Avatar hornets表示:

    不好意思,打太簡短了。手機的mail,通知我收到你已經回覆我留言了啦。sorry,那我的問題有解嗎?阿湯哥~求求你:~~

    阿湯說:

    我一直都是用這個方法 http://steachs.com/archives/571

  6. Avatar hornets表示:

    阿湯哥
    因為我的手機在你回覆後,馬上收到留言。這個功能在我的wordpress的這個功能似乎失效了。也不會通知我有新的留言。請問一下,有哪個外掛可以解決嗎?
    有點離題,但是想說這裡就是教不落,應該什麼都可以問不落吧^^
    謝謝

    阿湯說:

    手機收到留言?

  7. Avatar hornets表示:

    我的wordpress用這套說。可是用起來怎麼有點頓頓的?
    jQuery lazy load plugin
    我是有疑問。像圖片多的網頁就故意開著很久,讓他讀完再看。可是用這個之後,是不是都不會自動讀取完畢,要移動到那個畫面才會讀取?

    阿湯說:

    對,移到了才讀,所以會省一些流量,因為不會每個人都移到底

  8. Avatar 大豬表示:

    你說:下載jquery外掛後解壓縮上傳到你的佈景資料夾裡?

    是上傳到plugin的資料夾吧?

    阿湯說:

    是佈景沒有錯哦

  9. Avatar Dream表示:

    發現原因了
    側邊攔好像被視為「最後」
    所以一定要將網頁捲動到最後在向上捲動才會出現圖

    阿湯說:

    嗯嗯,要再多試試

  10. Avatar Dream表示:

    不知道位啥
    用這個JQ我側邊攔會破圖
    很明顯一開始沒問題
    但是JQ一載入就破圖了@@

    阿湯說:

    這支JQ我自己試都還OK

  11. Avatar Mike表示:

    這個效果前幾天上Sinchen部落格的時候就有發現了~
    超想要這個效果的,沒想到老大手腳真快啊!收下囉^^

    阿湯說:

    @@,我是無聊找的= =

  12. Avatar 黑兄表示:

    Blogger用在底部ok滴~

    阿湯說:

    嗯嗯,原則上要開啟的到就行了

  13. Avatar WSQ表示:

    filter掉了
    是< /head >而不是< /header >

    阿湯說:

    哈,打太順,打錯了….

  14. Avatar WSQ表示:

    我想你寫錯了
    “如果你的網站是Wordpress架設,下載jquery外掛後解壓縮上傳到你的佈景資料夾裡,在你的header.php裡的之前加入以下語法,即可使用:”

    是吧不是。

    阿湯說:

    看不太懂@@?

  15. Avatar Boss方表示:

    我加这个效果了。哈。

    阿湯說:

    ^^

  16. Avatar 万戈表示:

    很好的一个方法,只是可惜我喜欢把JQ加载在底部,这个对我来说不太适用

    阿湯說:

    照理說加載在底部也是可以啦~

發表留言 »

姓名(*)
信箱(*)