Загрузка изображений jQuery

Question

$('.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 (по умолчанию в css); Мне нужно, чтобы eWidth учитывался только после загрузки изображения (img) в класс .photoWindow

Если мой пикрут в кеше, то eWidth верен.

Если моя картинка имеет ширину 912, то значение eWidth должно быть 912, но не 600 ..

Надеюсь, вы меня понимаете .. Извините за плохой английский!

Answer 1

Если я понял ваш вопрос, вы хотите оценить eWidth только после загрузки изображения. Сначала куда загружается ваше изображение и какой элемент использует класс photoWindow?

Предположим, что это элемент img. Если это так, вы можете использовать:

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

Поэтому, когда элемент <img> загружен, вы вычисляете и размещаете изображение в любом месте.

Answer 2

Из вашего кода это выглядит так, как будто вы пытаетесь вытянуть eWidth из ширины элемента photoWindow. Почему бы не взять его с самого изображения?

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

Я также могу что-то упустить, но мне неясно, почему вы выполняете fadeIn () и show () для photoWindow - fadeIn () отобразит элемент после завершения его запуска.

Вы также можете выполнить рефакторинг этого последнего блока кода, работающего с фотоокном, следующим образом:

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