Как показать загрузку gif во время загрузки изображения с помощью javascript

Question

На моей странице я использую ссылки с предварительным просмотром изображений.

Когда вы идете по ссылке с помощью мыши, она показывает изображение предварительного просмотра.

Вот демо: http://cssglobe.com/lab/tooltip/03/

я хочу показать загрузки GIF в то время как изображение preiview загрузки.

Загрузка GIF так: http://i.imgur.com/54cQB45.gif

вот мой код Javascript;

this.screenshotPreview = function(){ 
     /* CONFIG */ 

       xOffset = 10; 
       yOffset = 30; 

       // these 2 variable determine popup's distance from the cursor 
       // you might want to adjust to get the right result 

     /* END CONFIG */ 
     $("a.screenshot").hover(function(e){ 
       this.t = this.title; 
       this.title = "";  
       var c = (this.t != "") ? "<br/>" + this.t : ""; 
       $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                 
       $("#screenshot") 
         .css("top",(e.pageY - xOffset) + "px") 
         .css("left",(e.pageX + yOffset) + "px") 
         .fadeIn("fast");            
    }, 
     function(){ 
       this.title = this.t; 
       $("#screenshot").remove(); 
    }); 
     $("a.screenshot").mousemove(function(e){ 
       $("#screenshot") 
         .css("top",(e.pageY - xOffset) + "px") 
         .css("left",(e.pageX + yOffset) + "px"); 
     });      
}; 


// starting the script on page load 
$(document).ready(function(){ 
     screenshotPreview(); 
}); 

и html-коды;

<a href="Link" class="screenshot" rel="image link">Link Name</a> 

так как я могу это сделать? Есть идеи ?

Answer 1

Вы можете использовать вариант следующего фрагмента кода, чтобы вызвать событие, когда он загружен:

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg') 
    .load(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      alert('broken image!'); 
     } else { 
      $("#something").append(img); 
     } 
    });