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（）注册的所有处理程序方法此时执行。

ajax loader的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。

将预加载的gif添加到脚本和页面中

1 个答案: