如何顯示加載gif圖像預覽通過javascript加載

在我的網頁上我正在使用圖像預覽的鏈接。如何顯示加載gif圖像預覽通過javascript加載

當您使用鼠標進行鏈接時，它會顯示預覽圖像。

這裏是演示：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>

所以我該怎麼辦？有任何想法嗎？

來源

2013-07-27 JacKy

雖然預覽裝嗎？加載需要2ms。看起來像是真正浪費資源來加載中間圖像，同時等待來自源URL的一點延遲。我的網頁上的 – DevlshOne

我比演示頁面有更大的預覽圖像。所以可能需要更多時間。 – JacKy

你可以使用下面的代碼片段的變化，一旦它的加載觸發事件：

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); 
     } 
    });

來源

2013-07-27 22:06:33 dmcqu314

我應該在哪裏激動地添加此代碼？ – JacKy

如何顯示加載gif圖像預覽通過javascript加載

回答

相關問題