jQuery/JS頁面加載

我在網站上搜索，但我找不到我想要的。jQuery/JS頁面加載

所以我想在頁面加載時顯示AJAX裝載機iamge（例如），不留白色...

請提供更詳細的代碼，我是新的。

謝謝！

2011-05-18 vladchooo

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

我相信這是你想要的。

來源

2011-05-18 16:06:15

結構上，這將是這樣的：

裝入DOM空容器，包括「加載圖像」
加載的加載內容和填充容器
附加JavaScript文件JavaScript事件處理程序的所有鏈接來覆蓋加載新頁面的默認行爲

但你會更好的使用某種框架。「Hash Bang」（＃！）是一種流行模式，請在Google上進行搜索。

祝你好運！

來源

2011-05-18 16:06:34

爲了使它更明顯，假設我們具有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>

來源

2011-05-18 16:07:50 XGreen

你能來，是隻在頁面加載時，沒有點擊按鈕來顯示內容，只是當頁面加載... *感謝詳細的代碼與描述！ – vladchooo 2011-05-18 16:18:18

是的。只是包裝它而不是在點擊功能只是在$（function（）{//一旦頁面準備就緒就執行}）; – XGreen 2011-05-18 16:29:17

但是，只有當頁面加載和我給出加載圖片時，我才需要它？我需要顯示加載圖片，只有當頁面加載 - 而不是顯示白屏... – vladchooo 2011-05-18 16:32:16

jQuery/JS頁面加載

回答

相關問題