Question

我正在使用ajax .load函数在我的网站上加载内容和图像。单击链接后，我希望将目标内容（具有#sub-content的任何页面）动态加载到#content div中。到目前为止，代码在加载内容时起作用。但是，在第一次加载任何页面时，似乎整个页面仍然在浏览器中重新加载。更具体地说，当点击链接时，带有导航和标题的左侧边栏区域会闪烁。直到第一次加载页面并在浏览器中缓存，然后再次单击加载功能按照我希望的方式工作。也就是说，加载内容而不重新加载整个页面，即侧边栏和导航。

接下来的问题是如何让这段代码能够链接到所需的页面并将其加载到#content div中，而无需在初始点击时重新加载整个页面？（我是以前使用iframe加载内容，但这种方法显然是最新的，我希望我可以让它工作）。谢谢！！

网站网址：www.adamclarkart.com

代码：

 // Part 1
$(document).ready(function(){
    $("#content").load("beach-1.html");
});

$(function(){

        $('#illustrationsSection a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#sketchesSection a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#motionTab a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#infoTab a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#info a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })
// Part 2 
        var originalTitle=document.title
        function hashChange(){
            var page=location.hash.slice(1)
            if (page!=""){
                $('#content').load(page+".html #sub-content")
                document.title=originalTitle+' – '+page
            }
        }

// Part 3, ajax spinner .gif
    $('html')
    .ajaxStart(function(){
        $(this).addClass('ajax-spinner')
    })
    .ajaxStop(function(){
        $(this).removeClass('ajax-spinner')
    })

// Part 4
        if ("onhashchange" in window){ // cool browser
            $(window).on('hashchange',hashChange).trigger('hashchange')
        }else{ // lame browser
            var lastHash=''
            setInterval(function(){
                if (lastHash!=location.hash)
                    hashChange()
                lastHash=location.hash
            },100)
        }
    })

Answer 1

我将一个类应用于这些链接，以便我可以在jQuery选择器上轻松选择

<a href="media.php" class="ajaxLink">Media</a>
<a href="photos.php" class="ajaxLink">Photos</a>
<a href="contact.php" class="ajaxLink">Contact</a>

<强>脚本

$(function(){

  $(".ajaxLink").click(function(e){
   e.preventDefault();
   $("#content").load($(this).attr("url"));   
  });

});

如何让ajax .load函数不重新加载整个页面

1 个答案: