jQuery Image loading

$('.photoRow a[id^=clickPhoto]').click(function()
    {
        $('#layerBg').show();
        $(this).show();
        var id = parseInt($(this).attr('id').substr(10));

        var img = new Image();
        img.src = '/p/' + id + '.jpg';

        $('.photoWindow').fadeIn().html(img);        
        var pWidth = $(window).width();
        var pTop = $(window).scrollTop();
        var eWidth = $('.photoWindow').width();
        alert(eWidth);
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', 开发者_如何转开发parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
    });

eWidth = 600 (default in css); I need to make eWidth considered only after the image (img) loaded into the class .photoWindow

If my picrute in the cache that eWidth is correct.

If my picture has a width of 912, then the value eWidth should be 912, but not 600..

I hope you understand me.. Sorry for bad english!

If I understood your question, you want to evaluate eWidth only after the image is loaded. First where is your image loaded and what is the element using the class photoWindow?

Supposing it's on an img element. If that's so you could use :

$('.photoWindow').load(function() {
        eWidth = $('.photoWindow').width();
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
});

So whenever the <img> element is loaded you'll calculate and place the image wherever you want.

From your code, it looks as if you're attempting to pull the eWidth from the width of the photoWindow element. Why not grab it from the image itself?

eWidth = $('.photoWindow img').width();

I may also be missing something, but I'm unclear as to why you're performing a fadeIn() and a show() on the photoWindow - fadeIn() will display the element once it's completed firing.

You may also be able to refactor that final block of code operating on the photoWindow like this:

$('.photoWindow').css({
  top: pTop + 10 + 'px',
  left: parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
});