帶有預加載圖像的jquery圖像

Question

$(document).ready(function(){ 
     // The plugin 
     $.fn.image = function(src, f){ 
     return this.each(function(){ 
       var i = new Image(); 
         i.src = src; 
         i.onload = f; 
         this.appendChild(i); 
       }); 
     } 

     // The code for the image to load 
    $("#asdf").image("images/3a.jpg",function(){ 
      alert("The image is loaded now"); 
     });  
}); 

我找到了上面的代碼。我想有一個可以加載圖像的元素，但在圖像完全加載之前，我希望它顯示加載gif，（使用css完成此操作）。它的工作原理，但會顯示圖像加載，而不是等待它被完全加載。 我想我應該顯示圖像警報正在使用hide（）show（）但我不太清楚如何從函數內引用它？

---

我試過這個沒有運氣，有人看到有什麼問題>？ 我想使用同一div的加載GIF那麼最終的圖像

$('#preload').replaceWith('<img src="preloader.gif" />') 
      .image("http://www.google.co.uk/intl/en_uk/images/logo.gif", function() { 
      $('#preload').replaceWith(this); 
      // is this called when image fully loaded? 
      }); 

Answer 1

您可能需要使用Lazy Loader插件（或類似的一個），而不是嘗試。請注意，您可以指定您自己的佔位符圖片。

Answer 2

你可以嘗試這樣的事：

var $loadingImg = $('<img />').attr('id','loadingImg').attr('src','preloader.gif'); 
    $("#preload").html($loadingImg.html()).image("http://www.google.co.uk/intl/en_uk/images/logo.gif"); 

不要讓我知道如何去。

Answer 3

發現了一個插件，不正是即時尋找，使用佔位GIF圖像，直到圖像滿載然後顯示最終圖像

http://flesler.blogspot.com/2008/01/jquerypreload.html