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.
精彩评论