如何在通過JQuery / CSS保持寬高比的同時調整通過ajax添加的圖像的大小以適合特定尺寸？

Question

我有一個Web應用程序，它通過ajax調用將一些內容從外部源加載到dom，返回的一件事是要在個人資料照片部分顯示的一組圖像（不同的尺寸和寬高比） 。 我希望調整每個圖像的大小以適合64px x 64px的區域，並且我想保持寬高比。 我能夠在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";

如果不執行預加載方法，則可以將onload添加到圖像元素本身。

Answer 2

我遇到的問題是找到一個jquery事件，該事件可靠地在圖像加載后觸發，因為圖像是在頁面加載后添加的。

無需為窗口設置onload偵聽器，而是為要遠程加載的圖像設置onload偵聽器。 在創建圖像對象之后並將其插入主體之前，請設置偵聽器。 偵聽器基本上可以是您發布的代碼中.each()所有填充物，