javascript - 导航时加载 GIF 图像

Question

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

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

Answer 1

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

假设页面的 HTML 内容位于名为 #div 的 div 中，并且有一个名为 #button 的按钮，单击该按钮会将您带到新页面。现在你可以做的是，每当单击 #button 时，你都可以清除当前 div 的 HTML 内容，加载新页面的 HTML(加载时你可以显示 GIF 图像)，然后用新页面的 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);

   });


});

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