Как я могу изменить размер изображения, добавленного с помощью ajax, чтобы соответствовать конкретным размерам, сохраняя при этом соотношение сторон с помощью JQuery / CSS?

Question

У меня есть веб-приложение, которое загружает некоторый контент из внешнего источника в dom через вызов ajax, одна из вещей, которая возвращается, это набор изображений (разных размеров и форматов), которые должны отображаться враздел фото профиля.Я хотел бы, чтобы каждое из изображений было изменено в соответствии с областью размером 64 x 64 пикселя, и я хотел бы сохранить соотношение сторон.Я смог сделать это в Firefox, Chrome и Safari, но мне не повезло заставить его работать в IE 7 или 8. Проблема, с которой я столкнулся, заключается в нахождении события jquery, которое надежно запускается после загрузки изображения, так какизображение было добавлено после загрузки страницы.Вот что работает в перечисленных браузерах:

$(window).load(function () {
        $('.profileThumbnail').each(function (i) {
            var divHeight = $(this).height();
            var divWidth = $(this).width();
            if (divHeight > divWidth) {
                $(this).css('height', '64px');
                $(this).css('width', 'auto');
            }
            else {
                $(this).css('height', 'auto');
                $(this).css('width', '64px');
            }

            divHeight = $(this).height();
            var divParentHeight = $(this).parent().parent().height();
            var divNewHeight = (divParentHeight - divHeight) / 2;
            $(this).parent().css('top', divNewHeight);
            divWidth = $(this).width();
            var divParentWidth = $(this).parent().parent().width();
            var divNewWidth = (divParentWidth - divWidth) / 2;
            $(this).parent().css('left', divNewWidth);
        });
    });

Я также пытаюсь центрировать (по горизонтали и вертикали) их, что и делает остальная часть этого кода, но я думаю, что у меня есть все этоработая, если я могу найти способ вызвать этот код после загрузки изображения в IE.

имейте в виду, что это должно работать как при первом посещении (без кэширования), так и при последующих посещениях (кэширование).Я ищу решение jquery, javascript или css, поскольку хочу избежать обхода / пропускной способности для каждого изображения.

Answer 1

Вы устали добавлять в изображения событие загрузки, которое срабатывает при загрузке изображения?Вот как работают предварительные загрузчики изображений.

var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";

Вы можете добавить нагрузку к самим элементам изображения, если не используете подход предварительной загрузки.

Answer 2

У меня возникла проблема с обнаружением события jquery, которое надежно срабатывает после загрузки изображения, поскольку изображение было добавлено после загрузки страницы.

Вместо настройки прослушивателя загрузкидля окна установите прослушиватель onload для изображений, которые вы загружаете удаленно.Установите прослушиватель после создания объекта изображения и перед его вставкой в ​​тело.Слушатель в основном может быть всем, что есть в .each() в коде, который вы разместили,