使用ajax加載另一頁時加載gif圖像

Question

有什么方法可以在單擊和同時加載GIF圖像時進行導航。 我嘗試過這種方式..

     $("#Videop").click(function ()
 {
     //till the time the post function below doesn't return the following image will be displayed
     tactile.page.getComponent("loadingnext").show();
     $.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
         function (data)
         {
             //get the new HTML content
             $("#root").html(data);
         });

 });

但是與該頁面關聯的腳本文件和后台函數調用如何？

Answer 1

我從您的問題中#Videop是，單擊#Videop時重定向並顯示正在加載的GIF圖像

$("#Videop").click(function ()
 {     //till the time the post function below doesn't return the following image will be displayed
     tactile.page.getComponent("loadingnext").show();
     window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
 });

上面的代碼將顯示GIF圖像，直到重定向頁面為止。 現在，您無需將頁面中的所有css和script文件都帶到這里。

編輯：

在您的新頁面Video.aspx添加此內容，希望這可以解決您的問題

$(document).ready(function(){
    //Display your GIF Image
    //tactile.page.getComponent("loadingnext").show(); 
    console.log("I'm loading");
});

jQuery(window).load(function () {
    //Hide your GIF image
   // tactile.page.getComponent("loadingnext").hide(); 
    console.log('page is loaded');
});

Answer 2

我認為您需要的是一個進度功能，並在ajax開始之前顯示等待的圖像，並在ajax結束之后隱藏。

1. 添加一個隱藏在body標簽中的元素，該元素可以是圖像或加載div。
2. 定義一個功能。
3. 在ajax之前和之后調用它。

這是一個小演示，希望對您有所幫助。

#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
    if(stop){
        $('#loading').hide();
    } else {
        $('#loading').show();
    }
};

$.ajaxSetup({
    beforeSend: function(){
        $.progress();
    }, complete: function(){
        $.progress(true);
    }
});

您可以自己更改樣式。

jsfiddler失敗了，我無法編寫代碼，對此感到抱歉。 ：D