显示预加载器图像,同时在html正文中附加一个巨大的图像

时间:2012-04-26 04:26:11

标签: jquery load append preloader

我需要在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 个答案:

答案 0 :(得分:1)

请在此div #screenshot上设置预加载器背景图片,

当这个div附加时,BG会在显示IMG巨幅图像之前显示