【问题标题】:Add a preloading gif into script and page在脚本和页面中添加预加载 gif
【发布时间】:2012-12-05 16:23:28
【问题描述】:

拜托,我对这段代码有疑问。 简而言之:我有一个带有 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');
        });
    });
});

【问题讨论】:

    标签: jquery function load preload


    【解决方案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');
    });
    

    我假设当任何 ajax 请求发生时,您将拥有一个透明的覆盖 div,它将覆盖页面或特定区域,这里我添加一个名为 preload 的类,该类将具有 background gif image of ajaxloader

    【讨论】:

    • 是的。这是 js 脚本..我在“目标”div 之前添加了一个“覆盖”div ..但是什么也没有发生..当我在 Chrome 中预览时我什么也看不到:-(
    猜你喜欢
    • 2015-02-28
    • 1970-01-01
    • 2011-09-02
    • 1970-01-01
    • 1970-01-01
    • 2019-10-21
    • 1970-01-01
    • 2017-08-01
    相关资源
    最近更新 更多