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>