2012-04-26 38 views
0

我需要在html正文中附加巨大图像之前显示预加载器图像。在我的脚本中,只有在完成加载后,带有图像的工具提示才会显示在鼠标悬停事件上。图像需要很长时间才能完成。同时我想在页面上显示一些内容。显示预加载器图像,同时在HTML主体中附加巨大图像

this.screenshotPreview = function(){  
xOffset = 10; 
yOffset = 30; 
$('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="images/image.png" 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(); 
}); 

谢谢。

回答

1

请这个div #screenshot设置预加载背景图片,

当这个div追加,BG将呈现巨大的IMG图像

+0

很好的解决方案之前显示。很简单,效果很好。谢谢。 – afazolo 2012-04-26 15:28:12

+0

所以你必须点击声望得分.. :) – ShibinRagh 2012-04-26 16:58:48