最近在一些網站上看到一個圖片效果，是用來延遲加載圖片的功用，主要並不是減少流量，而是降低主機瞬間負載，特別是圖片爆多的網站，如果一頁有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>
發現阿湯網站有點怪怪的
就是啊 廣告都會檔到文章…
喵嗚~
ㄚ湯哥哥有沒有可以把廣告最後載入的語法啊！
我試了幾個網路上教學的都沒效
不知道是不是我放的方式不對orz…
謝謝^^
物件不支援此屬性或方法= =
有辦法可以支援到
jquery-1.4.2.min.js
這個嗎??
因為我網頁有崁入 jquery-1.4.2.min.js
請問放在佈景資料夾的js資料夾裡面嗎？ Q_Q
還是放哪裡都可以？ 謝謝！
不好意思，打太簡短了。手機的mail，通知我收到你已經回覆我留言了啦。sorry，那我的問題有解嗎？阿湯哥~求求你:~~
阿湯哥
因為我的手機在你回覆後，馬上收到留言。這個功能在我的wordpress的這個功能似乎失效了。也不會通知我有新的留言。請問一下，有哪個外掛可以解決嗎？
有點離題，但是想說這裡就是教不落，應該什麼都可以問不落吧^^
謝謝
我的wordpress用這套說。可是用起來怎麼有點頓頓的？
jQuery lazy load plugin
我是有疑問。像圖片多的網頁就故意開著很久，讓他讀完再看。可是用這個之後，是不是都不會自動讀取完畢，要移動到那個畫面才會讀取？
你說:下載jquery外掛後解壓縮上傳到你的佈景資料夾裡?
是上傳到plugin的資料夾吧?
發現原因了
側邊攔好像被視為「最後」
所以一定要將網頁捲動到最後在向上捲動才會出現圖
不知道位啥
用這個JQ我側邊攔會破圖
很明顯一開始沒問題
但是JQ一載入就破圖了＠＠
這個效果前幾天上Sinchen部落格的時候就有發現了～
超想要這個效果的，沒想到老大手腳真快啊！收下囉^^
Blogger用在底部ok滴～
filter掉了
是< /head >而不是< /header >
我想你寫錯了
“如果你的網站是Wordpress架設，下載jquery外掛後解壓縮上傳到你的佈景資料夾裡，在你的header.php裡的之前加入以下語法，即可使用：”
是吧不是。
我加这个效果了。哈。
很好的一个方法，只是可惜我喜欢把JQ加载在底部，这个对我来说不太适用