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

Question

拜托，我对这段代码有问题。简而言之：我有一个带有 4 个链接的菜单的小网页：每个链接使用 jquery load 函数将页面内容加载到名为"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');
        });
    });
});

Answer 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。