загрузка содержимого через jquery ajax после завершения вывода php - PullRequest
Новая
       51

загрузка содержимого через jquery ajax после завершения вывода php

3 голосов
/ 29 июня 2011

В настоящее время я использую jquery ajax для POST-данных в php-файл, который использует эти данные для создания и вывода галереи на основе jquery.

"ссылки", по которым щелкают для запуска ajax: 

<li class="portfolioLink" id="identity">identity</li>
<li class="portfolioLink" id="mobile">mobile</li>
<li class="portfolioLink" id="web">web</li>

и образец jquery ajax: 

$("#identity").click(function(){
    $.ajax({
        url: 'portfolio.php',
        type: "POST",
        data: ({data: 'portfolio/design/identityDesign/*'}),
        success: function(data){
        $("#content_middle").html(data);
        }
    });
    $("#identity").addClass('active');
    $(".portfolioLink:not(#identity)").removeClass('active')
});

(этот запрос в основном повторяется еще 2 раза с различными данными:)

Это работает нормально, за исключением того, что выход портфолио.php (построитель галереи) загружается в #content_middle, когда обрабатывается JavaScript-код вывода (так что похоже, что галерея строится в реальном времени в #content_middle). Видя, что это произойдет, вероятно, будет иметь больше смысла: www.frende.me/design.php

Я хочу, чтобы галерея загрузилась полностью.

Ответы [ 2 ]

2 голосов
/ 29 июня 2011

Если я правильно понимаю, вы бы хотели, чтобы содержимое отображалось полностью после загрузки страницы.К сожалению, страница возвращается, как только DOM создан.Таким образом, изображения будут считаться созданными, но это не означает, что их src был загружен.

Попробуйте использовать предварительный загрузчик изображений, подобный этому one

Надеюсь, это поможет, в противном случаепрокомментируйте, если вам нужно больше деталей.

2 голосов
/ 29 июня 2011

Как насчет того, чтобы скрыть элемент, добавить новый html и показать его снова?Как это: 

$("#identity").click(function(){     
    $.ajax({         
        url: 'portfolio.php',         
        type: "POST",         
        data: ({data: 'portfolio/design/identityDesign/*'}),         
        success: function(data){ 
            $("#content_middle").hide();       
            $("#content_middle").html(data);         
            $("#content_middle").show();
        }     
    });     
$("#identity").addClass('active');     
$(".portfolioLink:not(#identity)").removeClass('active') });
...