jQuery-ajax / load（）方法是否自动显示其加载的内容？

Question

我真的被困在这里...我建立了一个小画廊来展示图像。

它由一个初始首页组成，并以网格形式排列了12个缩略图。 单击缩略图时，它们会折叠到屏幕左侧，并显示相应的图库项目。 当您在折叠缩略图上回滚时，它们将展开并隐藏下面的图库项目。 现在，您可以选择另一个缩略图，该缩略图将再次折叠缩略图并显示另一个图库项目。

到目前为止，我对所有事情都很满意，除了单击第二个（第三，第四等等）缩略图时。 它会淡出旧的图库项目，然后在加载后切换到新的图库项目。

我认为我编写脚本的方式是淡出包含节点内容的DIV，然后使用回调执行ajax .load（）方法来加载新的图库项目（以及进行其他一些操作） DIV中的内容）。 然后，在加载主图像后，我将DIV淡入。 看起来.load（）会在执行后立即显示正在被调用的元素。 这是预期的行为吗？

我开始认为这有点烦人了，因为我已经兜圈子了很久了！ 我将不胜感激-谢谢！

这是测试站点的链接： http : //hunter-design.dobwebdesign.co.uk/

我在这里包括了相关的JS：

$(window).ready(function() {

$('#grid-navigation li').click(function(){      
    var url = $('a', this).attr('href');
    var toLoad = url +' #node-content';

    $('#node-content').fadeOut('fast', function() {
        $('#node-content').load(toLoad, '', function(){
            $('#focused-case-study-image').hide();
            $('.case-study-images').attr({style:'display:none'});
            $('.case-study-images-thumbnails').attr({style:'display:block'});
            $('.case-study-images-thumbnails li:first').addClass('active');
            $('#focused-case-study-image').load(url + ' .case-study-images li:first img','',function() {
                $('#focused-case-study-image img').load(function() {
                    $('#focused-case-study-image').fadeIn('normal');                                
                    $('#node-content').fadeIn('normal');
                });
            });
            setThumbnails(url); 
        });
    });

    $("#grid-navigation li").animate({width:"38px"},{ queue:false, duration:300 });
});


function loadContent(toLoad, url) {
    $('#node-content').hide();
    $('#node-content').load(toLoad, '', function(){
        $('#focused-case-study-image').hide();
        $('.case-study-images').attr({style:'display:none'});
        $('.case-study-images-thumbnails').attr({style:'display:block'});
        $('.case-study-images-thumbnails li:first').addClass('active');
        $('#focused-case-study-image').load(url + ' .case-study-images li:first img','',function() {
            $('#focused-case-study-image img').load(function() {
                $('#focused-case-study-image').fadeIn('normal');                                
                $('#node-content').fadeIn('normal');
            });
        });
        setThumbnails(url); 
    });     
}

function setThumbnails(url) {
    $('.case-study-images-thumbnails li').click(function(){
        var liClass = $(this).attr('class');
        $('.case-study-images-thumbnails li').removeClass('active');
        $(this).addClass('active');
        $('#focused-case-study-image').fadeOut('fast', function(){
            $('#focused-case-study-image').load(url + ' .case-study-images li.' + liClass + ' img','',function(){
                $('#focused-case-study-image img').load(function() {
                    $('#focused-case-study-image').fadeIn('normal');                                
                });
            }); 
        });
    });
}

}）;

Answer 1

我看到的2个地方：

$('#focused-case-study-image img').load(function() {

要加载的网址在哪里？

Answer 2

我只是得到您在部分时间描述的奇怪行为。

我看到您在加载某些内容之前就隐藏了节点内容。 相反，我建议每当用户将鼠标悬停在折叠的缩略图上并再次展开时，隐藏节点内容。

这样，返回的内容将被隐藏，直到加载其他内容为止。

Answer 3

看来您的AJAX请求正在返回整个HTML页面，这不好。 尝试仅返回所需的JSON数据。

另外，除非您的数据会越来越大，否则我建议不要担心使用AJAX。 您有大约两个段落，每个图像要加载一个或两个网址，大约需要32个段落，这并不多。 让动画等待AJAX​​调用完成将使事情变得混乱并导致延迟。 我建议将您需要的数据作为JSON数据岛嵌入到页面中，然后再发送给客户端。