0

我正在尝试使用 jquery.address 插件获取 AJAX 网站

如果您查看http://www.idbranding.nl，则深层链接可以正常工作。

唯一的问题是我无法实现类似的加载屏幕：http: //www.nerisson.fr/（也使用 jquery.address 插件）

所以我的问题是，有人知道如何为内容设置动画（淡出/淡入）并显示/隐藏加载屏幕吗？我认为这并不难，但 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 回答