如何显示加载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加载

回答

相关问题