导航时加载 GIF 图像答案

【问题标题】：loading GIF image while navigating导航时加载 GIF 图像
【发布时间】：2013-11-29 17:51:37
【问题描述】：

有什么方法可以在点击时加载 GIF 图像并同时进行导航。

我尝试使用 jquery，但页面在某些移动浏览器中导航时没有发生加载器动画，是否有使用 ajax 的解决方案来克服该问题？

【问题讨论】：

您是否在询问是否可以在浏览器导航到其他页面时显示动画？如果是这样，答案是否定的，并非始终如一——大多数浏览器会在新页面加载之前“卸载”当前页面，因此在没有图像出现时会有时间间隔。
您需要使用 AJAX 来加载新内容和历史对象来操作当前 url。

【解决方案1】：

最好的方法是使用 AJAX 加载新内容。您可以做的是有一个按钮，单击该按钮会清除初始页面的 html 并重新加载其他 html 页面的内容。

假设您将页面的 HTML 内容放在名为#div 的 div 中，并且有一个名为 #button 的按钮，单击该按钮会将您带到新页面。您现在可以做的是，每当单击#button 时，您都可以清除当前 div 的 HTML 内容，加载新页面的 HTML（并且在加载时您可以显示 GIF 图像），然后使用 div 填充新页面的 HTML。

$("#button").click(function() {

   //till the time the post function below doesn't return the following image will be displayed     
   $("#div").html('<img src = "images/ajax-loader.gif" />');

   $.post("get_html.php", function (data) {

    //get the new HTML content
    $("#div").html(data);

   });


});

这只是一个示例，如果您更具体地了解您的需求，也许我可以编写适合您需求的代码。

【讨论】：

谢谢，与该页面相关的脚本文件、后台 Web 服务调用和样式表怎么样。
检查此页面 "cloud.netbiscuits.net/1305494/SyngentaMobileStage/" 在此页面中，我们有链接，因此如果单击任何链接，它将导航并显示加载器，但某些浏览器无法处理此问题同步调用，所以我打算使用上面提到的ajax。