javascript - 结合砌体，imagesLoaded 与 ajax 功能

Question

我正在制作一个网站，其中所有内部链接都使当前页面淡出而新页面淡入。现在这对我来说非常有用。问题是我正在尝试将它与出色的砖石插件结合起来。在第一个页面加载砌体确实工作，但我似乎无法弄清楚如何通过 ajax 在新加载的内容上重新启动砌体。我应该补充一点，当前砌体中的所有项目都会被删除，然后由新项目替换。

砌体代码是这样的:

    $container = $('#container');

    $container.imagesLoaded(function(){ 
        $container.masonry({
           itemSelector: '.item',
           transitionDuration: 0
        }); 
    });

而ajax加载代码是这样的:

    var newHash      = "",
        $mainContent = $("#ajaxcontainer"),
        $ajaxSpinner = $("#loader"),
        $el;

    $('.internal').each(function() {
        $(this).attr("href", "#" + this.pathname);
    }); 

    $(document).on('click', '.internal', function() {

        window.location.hash = $(this).attr("href");

    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent.fadeOut(500, function() {

                $ajaxSpinner.fadeIn();
                $mainContent.load(newHash + " #container", function() {
                    $ajaxSpinner.fadeOut( function() {
                        $mainContent.fadeIn(1000);
                    });
                    $('.internal').each(function() {
                        $(this).attr("href", "#" + this.pathname);
                    });        
                });

            });
        };

    });

    $(window).trigger('hashchange');

有没有人对如何实现这一点有任何意见？非常感谢。

Answer 1

我终于成功了!

我希望其他人会觉得这有帮助，所以我将其张贴在这里以供将来引用。

我遇到的一个问题似乎是我在加载数据时隐藏了容器。我用 fadeOut 和 fadeIn 隐藏了它，这似乎会导致砌体问题。为了不隐藏它本身，我现在将不透明度设置为 0 并在加载数据后设置为 1。脚本如下:

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $('#ajaxcontainer').fadeTo(500, 0, function() {

            $ajaxSpinner.fadeIn();
            $mainContent.empty();
            $.get(newHash, function(data){

                var $data = $(data).find("#container > *");

                $container.prepend($data).imagesLoaded(function(){
                    $container.masonry( 'prepended', $data, true );
                });

                $ajaxSpinner.fadeOut( function() {
                    $('#ajaxcontainer').fadeTo(1000, 1);
                });     
            });

        });
    };

});