当前位置: 动力学知识库 > 问答 > 编程问答 >

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").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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: