显示“页面加载"信息 [英] display "page loading" message

问题描述

我正在尝试在html页面中显示用于页面加载"的图像(.gif)，直到显示my_script.py的输出为止，我也不知道该怎么做. 这是我到目前为止所掌握的.预先非常感谢.

I'm trying to display an image (.gif) for "page loading" in html page until the output from my_script.py gets displayed, and I've no idea how to do that. This is what I've got so far. Many thanks in advance.

HTML:

<div id="loading">
   <p><img src="./images/loading.gif" /> Please Wait</p>
</div>

<form action="./cgi-bin/my_script.py" method="post" enctype="multipart/form-data" name="fname">
   <input type="submit" id="submit" value="Submit" />
</form>

js:

 $(document).ready(function() {
        $("form").submit(function() {
            showLoading();
            $('#content').load('./cgi-bin/my_script.py', null, showResponse);
        });

        function showResponse() {
            hideLoading();
        }

        function showLoading() {
            $("#loading").show();
        }

        function hideLoading() {
            $("#loading").hide();
        }
    });

推荐答案

您的脚本可以简化为:

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        $('#content').html('put your loading html here').load('/ajax_html_echo/',function(response, status, xhr) {
            //This is the callback. You can check for error here.
            //For example if (status == 'error') alertTheMedia();
        });
    });
});​

我所做的修订是:

• e.preventDefault()，如果用户启用了Javascript，则可以阻止默认表单提交.
• 已将加载消息添加到#content选择器，将html()的内部更改为要显示的内容.这将使初始内容成为您的加载消息，然后将其替换为成功后由.load返回的内容，或者如果出现错误，则必须明确告诉它要替换的内容.
• 精简代码，易于阅读，易于维护.

• e.preventDefault() to prevent default form submission if user has Javascript enabled.
• Added the loading message to the #content selector, change the internal of html() to what you want to be displayed. This will cause the initial content to be your loading message, then it will either be replaced by what's returned by .load on success, or you'll have to explicitly tell it what to be replaced with if it's an error.
• Condensed code, easier to read, so easier to maintain.

http://jsfiddle.net/8pgrD/

这篇关于显示“页面加载"信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！