Question

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

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

到目前为止，我对所有内容都非常满意，除非您点击第二个（第三个，第四个等）缩略图。它会淡化旧的库项目，然后在加载后切换到新的库项目。

我认为编写脚本的方式是淡出包含节点内容的DIV，然后使用回调执行ajax .load（）方法来加载新的gallery项（以及执行一些操作）此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。你有大约两个段落和每个图像加载一个或两个url，大约32个段落，这并不多。让动画等待AJAX调用完成会使事情变得混乱并导致延迟。我建议在将JSON数据岛发送到客户端之前将其作为JSON数据岛嵌入到页面中。

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

3 个答案: