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

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

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

【问题讨论】:

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

标签: javascript ajax jquery


【解决方案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。
猜你喜欢
  • 2015-06-26
  • 1970-01-01
  • 1970-01-01
  • 2021-09-14
  • 2012-06-05
  • 1970-01-01
  • 2013-02-20
  • 2013-10-24
相关资源
最近更新 更多