0

拜托，我有这个代码的问题。简而言之：我有一个带有 4 个链接的菜单的小网页：每个链接都使用 jquery 加载功能将页面内容加载到一个名为“target”的 div 中。我为页面添加了一些淡入和淡出效果。问题是当我有一个包含大量内容的大页面要加载时，所以我需要在“目标”div 上放置一个覆盖和小型预加载器 gif 并放入 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');
        });
    });
});
4

1 回答 1

1

无论何时Ajax request is about to be sent，jQuery 都会检查是否还有其他未完成的 Ajax 请求。如果没有进行中，jQuery triggers the ajaxStart event.

此时会执行已使用 .ajaxStart() 方法注册的所有处理程序。

ajax加载器的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.

于 2012-12-05T16:49:26.533 回答