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中工作。