在jQuery代码中添加微调器图像

时间:2012-09-11 04:20:06

标签: ajax spinner preloader

我有一个jquery来显示div中的链接而不重新加载页面: jQuery代码:

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function(event) {
        // Prevent default click action if javascript is enabled
        event.preventDefault();
    //load the content of the new page into the content of the current page
    $("#content").load( $(this).attr("href") + " #content");
    })
});
</script>

一切都很好并且有效,但这很简单!如何在此代码中加载内容之前添加加载图像?

和第二个问题,有没有办法在加载后在地址栏中显示新的页面链接?

1 个答案:

答案 0 :(得分:4)

您可以使用回调功能删除加载程序。

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function(event) {
        // Prevent default click action if javascript is enabled
        event.preventDefault();
        //load the content of the new page into the content of the current page
        $('#loader').show(); // Show some hidden loader on the page
        $("#content").load( $(this).attr("href") + " #content", function() {
            $('#loader').hide(); // Hide the loader when it completely loads the given URL.
        });
    })
});
</script>

对于你的第二个问题,这应该是答案。 Change the URL in the browser without loading the new page using JavaScript