0

ajax .load 関数を使用して、サイトにコンテンツと画像をロードしています。リンクがクリックされたら、ターゲット コンテンツ (#sub-content を含む任意のページ) を #content div に動的にロードします。これまでのところ、コードはコンテンツをロードする際に機能します。ただし、ページの最初の読み込み時に、ページ全体がまだブラウザーで再読み込みされているように見えます。具体的には、リンクをクリックすると、ナビゲーションとヘッダーのある左側のサイドバー領域が点滅します。ページが初めて読み込まれ、ブラウザにキャッシュされてから、もう一度クリックしてから、読み込み機能が思い通りに機能するようになります。つまり、ページ全体、つまりサイドバーとナビゲーションを再読み込みせずにコンテンツを読み込みます。

問題は、最初のクリックでページ全体を再読み込みせずに、このコードを目的のページにリンクして #content div に読み込むにはどうすればよいかということです。（以前は iframe を使用してコンテンツをロードしていましたが、この方法は明らかに最新のものであり、機能することを願っています）。ありがとう！！

ウェブサイトの URL: 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)
        }
    })
4

1 に答える 1

0

これらのリンクにクラスを適用して、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"));   
  });

});
于 2012-05-03T18:22:59.767 に答える