将预加载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。