htmlボディに巨大なイメージを追加しながらプリローダーイメージを表示

Question

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

ありがとうございます。これは、追加のdivとき

Answer 1

、これは#screenshot DIVに

をプリローダーの背景画像を設定してください、BGは、IMGの巨大な画像