Question

我在提交表单时使用下面的内容来获取整个页面，现在页面需要时间加载，因为它调用了CSS和JavaScript。
我需要表明，在任何人再次使用之前，数据仍然在该页面中加载。我想使用加载的模态弹出窗口，一旦页面完全加载，我将关闭弹出窗口我怎么能实现这个目标？

$.ajax({  
    type: "POST",
    url:  $url,
    data: "post=" +  post,
    //   data: form_data,
    success: function(data) {
        if(data!=""){
            $('body').html(data);
            ...

附加数据：

我在一个窗口中有两个框架。在右侧框架中，我的页面有链接，点击后会在隐藏字段中发布某些数据，并获得包含更改数据的整个右侧页面。现在我的右侧页面有诸如

之类的链接

<link rel="Stylesheet" href="abc.css" type="text/css" />
<script src="jquery-1.6.3.min.js"></script>

<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>

一旦页面被$（'body'）加载，这些文件需要花时间从服务器检索.html（data）;我希望加载这些文件，然后让用户完成他的工作

Answer 1

由于您要将load应用于整个body元素，因此在此之前的任何模态弹出式显示都将被移除，以便为新内容做好准备。

因此，我建议loading your content into a variable先使用$.get()：

var content;
$.get($url, "post=" + post, function(data){
    content = data;
});

这意味着您可以在此过程中显示加载图标，然后将内容加载到body，这将删除加载图标：

//show modal popup here    
$.get($url, "post=" + post, function(data){
    var content;
    content = data;
    if (content!=null){
       $("body").html(content);
     }
});

我的语法可能不太正确，因为我无法对此进行测试，但它应该让您了解可行的逻辑。

Answer 2

使用ajaxStart和ajaxEnd显示加载消息。

$("#myjaxloader").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

在myajaxloader中添加消息和图片

如果您想要更多阻止功能，可以使用blockUI。

Answer 3

$(form).on('submit', function(e) {
    e.preventDefault();  // to stop the page from reloading
    $.ajax({  
        type: "POST",
        url:  $url,
        data: "post=" +  post,  //use form.serialize to send the whole form
        beforeSend: function () {
            $(modal).show();
        }
    }).done(function(data) {
        if(data!=""){ $('body').html(data); }
    )).always(function() {
        $(modal).hide();
    });
});

Answer 4

您需要使用已加载帧的onload事件。如果您的两个帧都位于同一个域中，您可以执行以下操作：

导航窗口：

$.post(url, data).then(
    function() { // success handler
        window.errorTimer = setTimeout(showErrorPopup, 10);
    }, function() { // error handler
        showErrorPopup();
    }
);
showLoadingPopup();

内容窗口：

$(function() { // runs after everything is loaded
    window.top.otherFrame.clearTimeout(window.top.otherFrame.errorTimer);
    window.top.otherFrame.hideLoadingPopup.call(window.top.otherFrame);
});

在jquery ajax中发布后如何知道页面何时完全加载了引用

4 个答案: