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() {

где URL для загрузки?

Answer 2

Похоже, что ваши AJAX-запросы возвращают целые HTML-страницы, и это бесполезно. Попробуйте вернуть только те данные, которые вам нужны, в формате JSON.

Кроме того, если ваши данные не станут намного больше, я бы посоветовал не беспокоиться об использовании AJAX. У вас есть около двух абзацев и один или два URL-адреса для загрузки каждого изображения, что составляет около 32 абзацев, что не так уж много. Наличие анимации ожидания для вызова AJAX для завершения собирается сделать вещи chopy и привести к задержкам. Я бы предложил встроить необходимые данные в виде острова данных JSON на страницу перед их отправкой клиенту.

Answer 3

У меня только странное поведение, которое вы описывали часть времени.

Я вижу, что вы прячете содержимое узла прямо перед загрузкой чего-либо. Вместо этого я бы предложил скрывать содержимое узла всякий раз, когда пользователь наводит курсор мыши на свернутые миниатюры, и они снова раскрываются.

Таким образом, содержимое там будет скрыто до тех пор, пока что-то еще не будет загружено.