jQuery：調整大小加載後的圖像 - 調整大小已經起作用，但不會觸發

Question

我想顯示一個儘可能大的圖像。當用戶在節目快照中點擊它時，它會通過ajax加載，並且應該調整大小。再次，調整大小是沒有問題的，如果我使用它通過一個點擊事件，它完美的作品，但它沒有正確觸發，如果我有這樣的：

$('.thumbnail').click(function() { 
    id = $(this).attr('id'); 
    $('#picbox').fadeIn(fadeSpeed); 
    $('#picture').load("/propfe/ajax/picture/" + id); 
    $('#picture').fadeIn(fadeSpeed); 

    $('#bigpic').ready(function() { 
    var browserHeight = $(window).height() - 200; 
    var browserWidth = $(window).width() - 200; 
    var height = $('#bigpic').height(); 
    var width = $('#bigpic').width(); 

    var picRatio = width/height; 
    var windowRatio = browserWidth/browserHeight; 

    if(picRatio < windowRatio) { 
     $('#bigpic').css({ "height": browserHeight + "px" }); 
    } 
    if(picRatio > windowRatio) { 
     $('#bigpic').css({ "width": browserWidth + "px" }); 
    } 

    }); 

    $('.pic_loader').fadeOut(fadeSpeed, function() { 
    $('.pic_loaded').fadeIn(fadeSpeed); 
    }); 
}); 

到目前爲止，我我想我會盡快解釋它，也許你不需要閱讀這一段：代碼是通過點擊縮略圖來觸發的。首先，它獲取圖片的id，應該加載並淡入div，所有內容都將加載並加載gif。之後，ajax-request將被髮送，結果會淡入，準備就緒時，圖像（id = bigpic）應該調整大小。最後一行不是很有趣，它們只是淡出加載gif並在其餘所有內容中消失，代碼正在生成。

當我試圖給出一些變量時，會在任何內容消失之前給出警報，並且圖片的寬度和高度爲空，所以我認爲代碼在圖片加載之前觸發。

那麼它是如何可能的，它只是執行，如果圖像完全加載？

Answer 1

我發現了另一個解決方案： 通過jQuery我得到了我的瀏覽器的高度和寬度的值。我用ajax將它們發送給我的腳本，然後在請求中簡單計算我的寬度和高度。另外，如果瀏覽器的尺寸發生變化，我使用帶有$（window）.resize的舊jQuery函數調整圖像大小。 完美的作品:-)

AJAX請求：

$('.thumbnail').hover(function() { 
    $('.thumbnail').css({ "cursor": "pointer" }); 
}); 
    var browserHeight = $(window).height(); 
    var browserWidth = $(window).width(); 

$('.thumbnail').click(function() { 
    id = $(this).attr('id'); 
    $('#picbox').fadeIn(fadeSpeed); 
    $('#picture').load("/propfe/ajax/picture/" + id + '/' + browserWidth + '/' + browserHeight, function() { 
    }); 
    $('#picture').fadeIn(fadeSpeed); 

     $('.pic_loader').fadeOut(fadeSpeed, function() { 
     $('.pic_loaded').fadeIn(fadeSpeed); 
     }); 
}); 

使用jQuery調整：

$(window).resize(function() { 
    var browserHeight = $(window).height(); 
    var browserWidth = $(window).width(); 
    var windowRatio = browserWidth/browserHeight; 

    var height = $('#bigpic').height(); 
    var width = $('#bigpic').width(); 
    var picRatio = width/height; 

    if(picRatio < windowRatio) { 
     $('#bigpic').css({ "height": browserHeight - 180 + "px" }); 
    } 
    if(picRatio > windowRatio) { 
     $('#bigpic').css({ "width": browserWidth -150 + "px" }); 
    } 
}); 

在請求PHP腳本調整（陰影輔助是一個幫助過我建立在我自己的）

<?php 
$ratio = $height/$width; 
$iA = getimagesize("img/".$picture['Picture']['url']); 
$bild["width"] = $iA[0]; 
$bild["height"] = $iA[1]; 
$pRatio = $bild["height"]/$bild["width"]; 
$nwidth = null; $nheight = null; 
if($pRatio < $ratio) { $nwidth = $width - 150; } 
elseif($pRatio > $ratio) { $nheight = $height - 180; } 
echo $this->Shadow->image($picture['Picture']['url'], 'big', $nwidth, $nheight); 
?> 

Answer 2

我使用我的網頁上這個劇本，我寫我自己的收藏夾（無導航）

$('.lb_img').attr('src', $(this).attr('href')).load(function() { 
    $('.lb_container img').css({'max-height': winheight-80, 'max-width': winwidth-80}); 
    $('.lb_container').css({'margin-left': -$('.lb_container').width()/2-10, 'top': winheight/2-$('.lb_container').height()/2-10}); 
}); 

$('.lb_container img').css({'max-height': winheight-80, 'max-width': winwidth-80}); 
$('.lb_container').css({'margin-left': -$('.lb_container').width()/2-10, 'top': winheight/2-$('.lb_container').height()/2-10}); 

當圖像被載入我調整圖像的最大高度爲窗口的高度 - 80px和將圖像居中，然後我在load（）回調之外再次執行它，以便在IE中工作。