如何在瀏覽器上製作ajax加載圖片動畫

我需要在整個頁面加載時顯示ajax加載圖片。如何在瀏覽器上製作ajax加載圖片動畫

這在html：

<div id="loading"> 
    <img src="images/ajax_loader.gif" > 
</div>

這是腳本：

<script type="text/javascript"> 
    $(window).load(function() { 
    $('#loading').hide(); 
    }); 
</script>

出於某種原因，當我加載的頁面，我不看動畫。我確實看到了圖像，這裏有什麼想法可能是錯誤的？

來源

2013-07-12 user1471980

首先-ajax與它無關，你可能是想說'jQuery'。其次，你是否在你的代碼中包含了jQuery插件？您也可以使用chrome - 單擊F12並檢查控制檯選項卡是否有錯誤。 – alfasin

取決於......你究竟在裝什麼？你正在加載數據（圖片，文件等）還是做javasript處理？ – Cristy

@alfasin，我包含jquery庫，是否有圖像加載插件？ – user1471980

大家平時看到的形象，而不是圖像，如果整個頁面被「凍結」。

這通常發生在你正在做JavaScript處理的實際加載中，處理中暫停瀏覽器渲染直到完成。

您可以通過使用HTML5 web workers來避免這種情況，它提供了非阻塞處理，並且實際上具有多線程功能。

來自維基百科頁面：..is a JavaScript script executed from an HTML page that runs in the background, independently of other user-interface scripts that may also have been executed from the same HTML page。

我不知道這是否真的是你的問題，除非你告訴我們fiddle。

來源

2013-07-12 19:00:01 Cristy

它適用於jsfiddle。是的，我在頁面上有一堆正在處理數據的java腳本。 – user1471980

<div id="LoadingImage" style="display: none"> 
<img src.... /> 
</div> 

function ajaxCall() 
{ 
    $("#LoadingImage").show(); 

     $.ajax({ 
     type: "GET", 
     url: surl, 
     dataType: "jsonp", 
     cache : false, 
     jsonp : "onJSONPLoad", 
     jsonpCallback: "newarticlescallback", 
     crossDomain: "true", 
     success: function(response) { 
     $.("#LoadingImage").hide(); 
     alert("Success"); 
     }, 
     error: function (xhr, status) { 
     $.("#LoadingImage").hide(); 
     alert('Unknown error ' + status); 
     }  
    }); 
}

Reference 1 here.

注意，你必須包含JQuery的。

另一個好方法：

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }) 
;

Reference 2 here.

來源

2013-07-12 18:52:02

如何在瀏覽器上製作ajax加載圖片動畫

回答

相關問題