1

我在调整图像大小时遇到​​问题。这是代码：

  function resize() {
var winHeight = $(window).height();
var winWidth = $(window).width();
var divHeight = winHeight * .9;
var divWidth = winWidth * .7;
var marginT = -1 * (divHeight / 2);
var marginL = -1 * (divWidth / 2);

if (winHeight > 300) {
  $('#picture-box').height(divHeight);
  $('#picture-box').css("margin-top", marginT);
}
if (winWidth > 300) {
  $('#picture-box').width(divWidth);
  $('#picture-box').css("margin-left", marginL);
}

var divPos = $('#picture-box').offset();
$('#close').css('top','50%');
$('#close').css('margin-top',marginT);
$('#close').css('left',((divPos.left + divWidth) - 20)+'px');

var w = $('#main-image').width();
var h = $('#main-image').height();
var p = (divWidth-w<divHeight-h)?(divWidth/w):(divHeight/h);
var nw = Math.round(w * p) * .9;
var nh =  Math.round(h * p) * .9;
$('#main-image').width((nw>1)? nw : 1);
$('#main-image').height((nw>1)? nh : 1);
var imgMarginT = (divHeight - nh) / 2;
var imgMarginL = (divWidth - nw) / 2;
$('#main-image').css("margin-left", imgMarginL);
$('#main-image').css("margin-top", imgMarginT);
$('#close').css('position','fixed');
$('#close').css('z-index','101');

$('#tshirt-button').css('left',divPos.left);

$('#memory-button').css('left',(divPos.left + divWidth) - 130);

$('#left-arrow').css('left',divPos.left + 25);
$('#right-arrow').css('left',(divPos.left + divWidth) - 75); }

function triggerRightArrow() {
if (quiltType == 'tshirt') {
  tshirtIndex++;
  if (tshirtIndex > MAX_TSHIRT_INDEX)
    tshirtIndex = 1;

  $('#picture-box').html('<img id = "main-image" src = "images/quilts/tshirt_'+tshirtIndex+'.jpg" />').then(resize(), resize());
}
else {
  memoryIndex++;
  if (memoryIndex > MAX_MEMORY_INDEX)
    memoryIndex = 1;

  $('#picture-box').html('<img id = "main-image" src = "images/quilts/memory_'+memoryIndex+'.jpg" />').then(resize(), resize());
} }

function triggerLeftArrow() {
if (quiltType == 'tshirt') {
  tshirtIndex--;
  if (tshirtIndex < 1)
    tshirtIndex = MAX_TSHIRT_INDEX;

  $('#picture-box').html('<img id = "main-image" src = "images/quilts/tshirt_'+tshirtIndex+'.jpg" />').then(resize(), resize());
  //resize();
}
else {
  memoryIndex--;
  if (memoryIndex < 1)
    memoryIndex = MAX_MEMORY_INDEX;

  $('#picture-box').html('<img id = "main-image" src = "images/quilts/memory_'+memoryIndex+'.jpg" />').then(resize(), resize());
  //resize();
} }

我的问题是，当调用 triggerRightArrow 函数时，图片加载正确，但大小调整错误。当我再次调用 triggerRightArrow，然后调用 triggerLeftArrow 时，图像的大小已正确调整。这个解释可能会让人困惑，所以这里是演示的页面http://creationsbyanna.x10.mx/quilts.html

如果有人能告诉我如何让图片在第一次加载时正确调整大小，我将不胜感激。

4

1 回答 1

0

好的，我通过在页面加载时将图片加载到缓存中来使其工作。我仍然不确定为什么图片只有在加载到缓存中时才会正确调整大小，但这是我迄今为止找到的唯一解决方案。这是我在 $(init) 方法中的内容：

for (var i = 1; i <= MAX_TSHIRT_INDEX; i++) {
  heavyImage = new Image(); 
  heavyImage.src = 'images/quilts/tshirt_' + i + '.jpg';
}

for (var i = 1; i <= MAX_MEMORY_INDEX; i++) {
  heavyImage = new Image(); 
  heavyImage.src = 'images/quilts/memory_' + i + '.jpg';
}
于 2012-11-19T21:06:34.797 回答