將預加載gif添加到腳本和頁面

Question

請幫我解決這個問題。 簡而言之：我有一個帶有4個鏈接菜單的小型網頁：每個鏈接都使用jquery加載函數將頁面內容加載到名爲「target」的div中。我添加了一些淡入淡出效果的頁面。 問題是，當我有一個巨大的頁面加載大量內容時，所以我需要將一個覆蓋和小預加載器gif放在「目標」div和js腳本內部的代碼中，但我不知道怎麼樣。請，有人可以幫我嗎？謝謝..

這裏的js函數：

google.load('jquery', '1.4.2'); 
google.setOnLoadCallback(function(){ 

$('.nav a').click(function() { 
    $('.nav a').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

$('#link1').click(function() { 
    $('#target').fadeOut('fast', function() { 
     $('#target').load('content/1.html', function() { 
      $('#target').fadeIn('slow'); 
     }); 
    }); 
}); 

$('#link2').click(function() { 
    $('#target').fadeOut('fast', function() { 
     $('#target').load('content/2.html', function() { 
      $('#target').fadeIn('slow'); 
     }); 
    }); 
}); 

Answer 1

每當Ajax request is about to be sent，jQuery的檢查是否還有其他優秀的Ajax請求。如果沒有任何進展，jQuery triggers the ajaxStart event。

此時將執行已經使用.ajaxStart（） 方法註冊的所有處理程序。

CSS類阿賈克斯裝載機

.preload{ 
    background:url('your gif loader image path') center no-repeat; 
} 

的那麼這個jQuery將做預壓。

$('body').ajaxStart(function() { 
    $('.overlay').css({"background":"black","opacity":"0.7"}).show().addClass('preload'); 
}); 

我認爲你將有一個透明覆蓋DIV將覆蓋頁面或特定區域時，任何Ajax請求發生了，在這裏我加入了一個名爲preload類將有一個background gif image of ajaxloader。