Question

我在网站上搜索了一下，但我找不到我想要的内容。

所以我想在页面加载时显示AJAX loader iamge（例如），而不是保持白色......

请提供更详细的代码，我是新的。

谢谢！

Answer 1

$(function(){

  var ajax_load = "<img src='images/loading.gif' alt='loading...' />";
  $('body').html(ajax_load);
    var postData = $("#form").serialize();
        $.ajax({
            type: "POST",
            url: "ajaxpage.php",
            data: postData,
            success: function(body){
            $('body').html(body);
            }
        });
});

我相信这就是你想要的。

Answer 2

在结构上，它会是这样的：

使用空容器加载DOM，包括“loader image”
加载加载内容并填充容器的javascript文件
将javascript事件处理程序附加到所有链接以覆盖加载新页面的默认行为

但是你最好使用某种框架。 “哈希爆炸”（＃！）是一种流行的模式，谷歌搜索它。

Answer 3

为了使其更加明显，假设我们有带有此标记的HTML页面：

<button id="btnLoad">Load Content</button>
<div id="content">
  Please click "Load Content" button to load content.
</div>

我们希望在用户点击“加载内容”按钮时加载内容。因此，我们需要首先将click事件绑定到该按钮，并仅在触发后才发出AJAX请求。

$("#btnLoad").click(function(){
    // Make AJAX call
    $("#content").load("http://example.com");
});

上面的代码将http://example.com中的内容加载到。{3}}中。在加载页面时，我们希望在“内容”中显示我们的动画GIF图像。所以我们可以进一步改进我们的代码：

$("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

.load（）函数会用加载的内容替换我们的加载图像指示符。

您可能正在使用jQuery的其他AJAX函数，如$ .ajax（），$ .get（），$ .post（），在这种情况下使用它们的回调函数来删除加载的图像/文本并追加加载的数据。 / p>

这也是在ajax调用完成之前隐藏内容的解决方案。

CSS：

<style type="text/css">
     #content 
     {
         display:none;
         }
</style>

JQ：

$(function () {

            var loadingImg = $('#loadingImage');
            loadingImg.show();

            $.ajax({
                url: "secondpage.htm",
                cache: false,
                success: function (html) {
                    loadingImg.hide();
                    $("#content").append(html).fadeIn();
                }
            });

        });

HTML：

<body>
    <img src="loader.gif" id='loadingImage' alt='Content is loading. Please wait' />
    <div id='content'>

    </div>

</body>

jQuery / JS页面加载

3 个答案: