How to change the attribute when only when the image loads?

var light ="http://www2.breakpoint.com.eg/site-content/themes/break/images/webdesign/webdesign_thumb3a.jpg";

    $('#lightbox').animate({
    top: '0px'
  }, 1000, function() {
    $("img#portimg").attr({
         src: 'images/loading.gif',
         style: 'margin-top:200px; width:31px; height:31px'
});

$("img#portimg").attr({
         src: light,
         style: 'margin-top:10px; width:620px; height:550px'
});

Using the code above, I'm showing a loading image that disappears once the the second image loads.

What i'm trying to do is to change the style only when the second imag开发者_Python百科e loads, because what happens is that the loading image appears but jquery neglects the first style and show the image with the second style.

any ideas?

OK, now that I better understand what you're trying to do.

Create another image (it doesn't have to be inserted into the DOM). Set an onload handler for that image so you will know when it's loaded. Set the src to that image to light. When that image is loaded, call your code to change the attributes on "img#portimg". Because the light image is now in the browser memory cache, it will display immediately. Meanwhile, your loading image would have been displayed the whole time the light image was loading.

If you want to do this a less complicated way, then just preload the light image in your startup sequence so you don't have to wait for it with:

var myLightImage = new Image(light);   // create Image object in global variable

Then, it will be available instantly anytime you need it without any waiting.

have you tried to use the .load() handler. I.e. something like

$("img#portimg").attr({
         src: 'images/loading.gif',
         style: 'margin-top:200px; width:31px; height:31px'
}).load(function(){...set your styles...});