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

【问题标题】：load gif image while loading the other page using ajax在使用 ajax 加载其他页面时加载 gif 图像
【发布时间】：2013-11-18 06:17:46
【问题描述】：

有什么方法可以在点击时加载 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);
         });

 });

但是与该页面相关的脚本文件和后台函数调用呢？

【问题讨论】：

data 返回什么？导航页面使用window.location.href("www.google.com");
如果我使用 window.location.href("www.google.com") 那么导航会发生，但有些浏览器不会动画 gif 图像，所以我找到了一种使用 ajax 加载内容的方法，但是脚本文件 css 和后台调用没有调用与加载页面相关的调用。
那么data 包含什么？一个完整的html页面？？？
是的整个 html 页面..
这是一种非常糟糕的做法

标签： javascript html ajax jquery

【解决方案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');
});

【讨论】：

我尝试了这种方法，但在 android 本机浏览器中重定向时没有看到动画。
你试过tactile.page.getComponent("loadingnext").show();在console的某个地方，看是否显示GIF图像？
在控制台中显示，当谷歌它有些人告诉一些浏览器无法处理这个同步调用并采用 href 属性时，我尝试停止 2 秒，以便加载器在显示后动画 2 秒像静态图像和导航将在 2 秒后继续。
您希望 GIF 图像在重定向页面中显示直到其完全加载？？
不，我想要的是当一个链接被点击导航以及 gif 加载应该发生。请查看此页面http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/ 并点击任何链接

【解决方案2】：

我认为你需要一个进度功能，并在 ajax 开始前显示等待图像，并在 ajax 结束后隐藏。

添加一个隐藏在 body 标签中的元素，可以是图像或加载 div。
定义一个函数。
在 ajax 之前和之后调用它。

这是一个小demo，希望对你有所帮助。

#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

【讨论】：