0

jquery.addressプラグインを使用してAJAXWebサイトを取得しようとしています

http://www.idbranding.nlを見ると、ディープリンクは正常に機能します。

唯一の問題は、http： //www.nerisson.fr/（jquery.addressプラグインも使用）のようなロード画面を実現できないことです。

だから私の質問は、コンテンツ（FadeOut / FadeIn）をアニメーション化し、ロード画面を表示/非表示にする方法を知っている人はいますか？難しいことではないと思いますが、アニメーションに関しては、jquery.addressのドキュメントは限られています。

これが私のコードです：

function loadURL(url) {
    console.log("loadURL: " + url);
    $("#content").load(url);
}       

// Event handlers
$.address.init(function(event) {
    console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
    $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
    console.log("change");
})

$('a').click(function(){
    loadURL($(this).attr('href'));
});
4

1 に答える 1

1

おそらくロード関数として次のようなものです：

$("#content").fadeOut("fast", function() { //block of code to be executed when page is faded out
    $("#loadingPlaceholder").fadeIn("fast"); // fade in placeholder (e.g. loading image)
    $.get(url, function(data){ // get the data and if data has been loaded...
        $("#loadingPlaceholder").fadeOut("fast"); // fade out placeholder
        $("#content").empty().html(data).fadeIn("fast"); // empty the innerHTML (--> prevents "flickering"), insert the loaded data and fade in again
    });
});

さらにclick()、新しいリンク（ロードされる可能性がある）に適用する必要があるため、関数を使用しません->代わりにデリゲート/オンを使用します（使用しているjQueryのバージョンがわからない）;）

より詳細な例については、私のバージョンを確認してください https://github.com/peter-m/blueprint/blob/master/js/pushState.js

于 2012-05-14T12:09:21.147 に答える