jQuery/JS页面加载

问题描述：

我在网站上搜索，但我找不到我想要的。jQuery/JS页面加载

所以我想在页面加载时显示AJAX装载机iamge（例如），不留白色...

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

谢谢！

答

$(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); 
      } 
     }); 
});

我相信这是你想要的。

答

结构上，这将是这样的：

装入DOM空容器，包括“加载图像”
加载的加载内容和填充容器
附加JavaScript文件JavaScript事件处理程序的所有链接来覆盖加载新页面的默认行为

但你会更好的使用某种框架。 “Hash Bang”（＃！）是一种流行模式，请在Google上进行搜索。

祝你好运！

答

为了使它更明显，假设我们具有HTML页面，这个标记：

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

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

他上面的代码加载内容从http://example.com进入。当页面被加载时，我们想要在“内容”中显示我们的动画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（））来使用它们的回调函数来删除加载的图像/文本并追加加载的数据。

这里也是隐藏内容直到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>

你能来，是只在页面加载时，没有点击按钮来显示内容，只是当页面加载... *感谢详细的代码与描述！ – vladchooo 2011-05-18 16:18:18

是的。只是包装它而不是在点击功能只是在$（function（）{//一旦页面准备就绪就执行}）; – XGreen 2011-05-18 16:29:17

但是，只有当页面加载和我给出加载图片时，我才需要它？我需要显示加载图片，只有当页面加载 - 而不是显示白屏... – vladchooo 2011-05-18 16:32:16

jQuery/JS页面加载

相关推荐