使用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