jquery load to download the content first

this is a strange case, I have a jquery script that works with load() and a PHP script with a gif loader until this script is retrieved FADING IN, this jquery is launched on click

The problem is that the jquery script is kinda useless for its real intent because this php script I call returns something like

<img src="resizer.php=filename=/img/1.jpg&width=400" />

where 1.jpg (file name) is retrieved by the PHP page called in ajax from a db related to the id of the image passed through load()

so, when the html text fades in the image will still need to be loaded from the resizer.php thus it will appear norma开发者_JAVA技巧lly

How can I organized this to fade In once everything is downloaded? I can't call the resizer.php directly because it outputs a JPEG header

var img = new Image();
img.onload = function() { /* CALLBACK GOES HERE */ }
img.src = "resizer.php=filename=/img/1.jpg&width=400";

If you don't have control of the page outputting the <img> tag, you can either extract the source with a regular expression or with a DOM parser.

I'm not sure if I'm understanding correctly, but if you do something like this:

$document.ready(function() {

$('#loadID').load("resizer.php=filename=/img/1.jpg&width=400", function(){

$('#loadID').fadeIn('slow');    

});

});

The fadeIn will not be fired until "resizer.php=filename=/img/1.jpg&width=400" is fully loaded.

Hope that helps.

edit: fixed a selector (the fadeIn)

loadID would be the ID that you are loading in to.

Adding another answer. In your case you want to grab the result of the php script, so you'll want to use jQuery's ajax function using the method get or post. Example:

$.get("file.php", function(data){ alert("Data Loaded: " + data); });

This will pop up an alert box that says "Data Loaded: whatever the php returns"

So in your case you would do:

$.get("resizer.php", function(data){ $('#loadID').html(data) });

Again, I may not be understanding 100% sorry if this isn't what you're looking for.