Question

有什么方法可以在onclick上同时加载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并显示加载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结束后隐藏。

添加隐藏在body标记中的元素，可以是图像或加载div。
定义一个函数。
在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

使用ajax加载其他页面时加载gif图像

2 个答案: