Question

我有一个用于导航的jQuery脚本，使用AJAX淡入每个页面。我也使用imagesLoaded在从数据库中提取图像后显示图像。

每个都可以自行完成，当页面最初从图像页面加载时，图像会完美加载。但是，如果我在最初从其他页面加载后使用导航点击图像页面，则imagesLoaded不会触发。

images脚本部分：

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());
}

如果点击正确的链接，我怎样才能在图像页面上触发imagesLoaded？

我也愿意接受清理代码的建议。：）

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...
}

使用AJAX在特定页面上使用jQuery fire函数可以防止默认导航

1 个答案: