Question

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

  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

的页面

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

Answer 1

好的，我通过在页面加载页面上加载缓存中的图片来实现它。我仍然不确定为什么这些图片只有在加载到缓存中时才能正确调整大小，但这是我迄今为止找到的唯一解决方案。这是我在$（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';
}

比例调整jquery

1 个答案: