Функция огня jQuery на определенной странице с AJAX предотвращает навигацию по умолчанию

Question

У меня есть скрипт jQuery для навигации, использующий AJAX для постепенного исчезновения на каждой странице. Я также использую imagesLoaded для отображения изображений после извлечения их из базы данных.

Каждый из них отлично работает сам по себе, и изображения прекрасно загружаются, когда страница загружается со страницы изображений изначально. Однако если я использую навигацию для перехода на страницу изображений после первоначальной загрузки с другой страницы, imagesLoaded не запускается.

imagesLoaded часть скрипта:

function portfolioImages() {
    $( function() {
        var $container = $('#container');
        var $content = $container.find('#columns');

        $(document).ready(function() {
            var items = getItems();
            console.log( items );
            $content.append( $(items) );
            $content.imagesLoaded()
            .progress( onProgress )
        });
    });

    function getItems() {
        var items = '';
        for ( var i = 0; i < 1; i++ ) {
            items += getImageItem();
        }
        return items;
    }

    function getImageItem() {
        var item;
        var src;
        $.ajax({
            async: false,
            url: "images-query.php",
            dataType: "json",
            success: function(data){
                item=" ";
                for (var i in data.images) {
                    item+="<li class=\"is-loading\"><img src=\"images/"+data.images[i].filename+"\" class=\""+data.images[i].orientation+"\" /></li>";
                }
                item+=" ";
            }
        });
        console.log(item);
        return item;
    }

    function onProgress( imgLoad, image ) {
        $( image.img ).fadeIn();
        var $item = $( image.img ).parent();
        $item.removeClass('is-loading');
        if ( !image.isLoaded ) {
            $item.addClass('is-broken');
        }
    }
}

JQuery AJAX навигационная часть:

var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(document).ready(function() {
    if (pgurl == 'portfolio'){
        portfolioImages();
    }
    $("#links li a.menu").each(function(){
        if($(this).attr("href") == pgurl){
            $(this).addClass("default");
            $(this).addClass("active");
        }
    });
    $('#links a.menu.default').click(function(e) {
        e.preventDefault();
        $(this).addClass("active");
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            success: function(data) {
                $('#newcontent').fadeOut(function() {
                    $(this).fadeOut();    
                    $('#links a').not( ".default" ).removeClass("active");

                    $('#defaultcontent').fadeIn(function() {
                        $(this).fadeIn();    
                        window.history.pushState(null, data, "/ajaxtransition/" + url);
                    });

                });
                if(data = 'portfolio'){
                    return false;
                }
            }
        });
    });
    $('#links a').not( ".default" ).click(function(e) {
        e.preventDefault();
        $(".active").removeClass("active");
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            success: function(data) {
                $('#defaultcontent').fadeOut(function() {
                    $(this).fadeOut();    

                    $('#newcontent').fadeOut(function() {
                        $(this).load(url + ' #defaultcontent').fadeIn();
                        window.history.pushState(null, data, "/ajaxtransition/" + url);
                        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
                        $("#links li a.menu").each(function(){
                            if($(this).attr("href") == pgurl){
                                $(this).addClass("active");
                            }
                            if($(this).attr("href") == 'portfolio'){
                                $('#newcontent').html(portfolioImages());
                            }
                        });
                    });
                });
            }
        });
    });
});

И соответствующая разметка HTML:

<ul id="links">
    <li><a href="portfolio" rel="portfolio" class="menu">Portfolio</a></li>
    <li><a href="about" rel="about" class="menu">About</a></li>
    <li><a href="contact" rel="contact" class="menu">Contact</a></li>
</ul>

Я попытался подключить следующий фрагмент, найденный в конце второго $('#newcontent').fadeOut(function() { ... }) раздел, но он не дал правильных результатов. imagesLoaded запускается на исходной странице при повторном нажатии на нее, а не на странице изображений.

if($(this).attr("href") == 'portfolio'){
    $('#newcontent').html(portfolioImages());
}

Как заставить изображения загружаться на страницу с изображениями при нажатии на соответствующую ссылку?

Я также открыт для предложений по очистке кода.:)

Answer 1

JQuery-х .load ( http://api.jquery.com/load/) метод также является асинхронным и использует функцию обратного вызова. Попробуйте использовать это здесь:

$(this).load(url + ' #defaultcontent', function() {
     $(this).fadeIn(); 
     window.history.pushState(null, data, "/ajaxtransition/" + url);
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $("#links li a.menu").each(function(){
         if($(this).attr("href") == pgurl){
             $(this).addClass("active");
         }
          if($(this).attr("href") == 'portfolio'){
             $('#newcontent').html(portfolioImages());
          }
     });
});

Также, что касается организации кода, я бы предложил определить обратные вызовы в другом месте, а затем вызвать их из асинхронной функции:

$(this).load(url + ' #defaultcontent', callback);

function callback() {
     $(this).fadeIn(); 
     window.history.pushState(null, data, "/ajaxtransition/" + url);
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     // and so on...
}