Question

我想展示尽可能大的图像。当用户在galerie中单击它时，它将通过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中淡入，所有内容都将加载并使用loading-gif。之后，将发送ajax-request，结果将被淡入，当它准备就绪时，应调整图像（id = bigpic）的大小。最后几行不是很有趣，它们只是淡化了loading-gif并且在所有其余部分中逐渐消失，代码正在生成。

当我试图给出一些变量时，在任何内容消失之前给出警报，并且图片的宽度和高度为空，所以我认为，代码是在图片加载之前触发的。

那么，如果图像完全加载，它是如何可能的呢？

Answer 1

我在我的页面上使用这个脚本，我写了自己的灯箱（没有导航）

$('.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中。

Answer 2

我找到了另一个解决方案：通过jQuery我得到浏览器高度和宽度的值。我用ajax将它们发送到我的脚本，然后在请求中简单地计算我的宽度和高度。另外，如果浏览器的尺寸发生变化，我会使用旧的jQuery函数和$（window）.resize来调整图像大小。完美的工作： - ）

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); 
?>

jQuery：加载后调整图像大小 - 调整大小已经有效，但是没有被触发

2 个答案: