JQuery 圖片 Loading 效果

有時候因為圖片解析度太高所以圖片會讀取比較久，但又不想讓人在等待的時候太無聊就需要用到這個效果。

首先對於 JQuery 有些瞭解的人都知道第一步要先插入下面行程式碼在 ＜head＞ 標籤中

＜script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"＞＜/script＞

再來這部分就是關鍵，以下是執行程式的代碼，請將它放入 ＜script＞ 標籤中或是建立一個 .js 檔引入它

$(function() {
  $.fn.LoadingImg = function() {
    return this.each(function() {
      var that = this;
      var src = $(this).attr("src2");        //取得當前src2的屬性
      var img = new Image();        //建立新的圖片
      img.src = src;
      var loading = $("＜img src='loading.gif' ＞");        //讀取的圖片
      $(this).after(loading);        //加入讀取的圖片
      $(this).hide();        //隱藏目前的圖片
      $(img).load(function() {        //讀取完畢後
        loading.remove();
        $(that).attr("src", src);
        $(that).show();
      });
    });
  };
  $("img").LoadingImg();
});

最後就是在 HTML 中對應的圖片代碼

＜img src2="demo.jpg"＞

這樣一來當圖片在還沒讀取完畢之前會先用讀取動畫替代，等到圖片讀取完畢後就會將讀取動畫替換掉。