loader - 简单的模态加载器

Question

我是使用 jquery 的新手。我正在尝试在 simplemodal.js（Eirc Martin 的简单模态）中添加一个名为“jBox”的函数，该函数将获取数据（即链接）和选项，并使用 ajax 将内容加载到模态容器中。这样我想在我的页面上的几个地方轻松调用这个函数

    jBox = function(address, options){
        $.get(address, function(data) {     
            $.modal(data);
        }); 
    };
});

代码工作正常，但我想在内容完全加载之前添加加载图像。在 simplebox 中有很多关于 loader/spinner 的类似帖子，但对我没有任何作用。我正在尝试以下代码

$('#test').load('<img src="loader.gif">').html(data);
$('#test').modal();

但是，在某种程度上，它对我不起作用。任何想法我做错了什么？谢谢

Answer 1

我使用ajaxStart和ajaxStop事件。

$("body").on({
    ajaxStart: function() { 
        $(this).addClass("loading"); // so page knows it's in loading state
        // .. your modal code
    },
    ajaxStop: function() { 
        $(this).removeClass("loading"); // not it loading state anymore
        // .. What you should do if loading is done. (eg. hide modal)
    }    
});

在这种情况下，我将主体类设置为“加载”。因此，如果您愿意，可以在 css 中做一些魔术。我也倾向于使用它来禁用表单。

body.loading div.some-class {
    // your special style for during loading
}