开发者

load content via jquery ajax after php output is complete

I am currently using jquery ajax to POST data to a php file which uses that data to build and output a jQuery-based gallery.

the "links" that are clicked on to trigger the ajax are:

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

and a sample of the jQuery ajax is:

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

(this jquery is basically iterated 2 more times with different data:)

This is working fine, except that the output of portfolio.php (the gallery builder) is loaded into #content_middle as the output's JavaScript is being processed (so it looks like the gallery is being built live in #content_middle). Seeing it happen will probably make more sense: www.frende.me/design.php

What I want to happen is for the gallery to load fully built.


How about you hide the element, add the new html to it and show it again? Like this:

$("#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') }); 


If I understand correctly, you would like to have the content appear completely once the page loads. Unfortunately the page is returned as soon as the DOM is created. So images will be considered constructed, but that does not mean that their src has been loaded.

Try using a image preloader like this one

Hope this helps, otherwise comment if you need more details.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜