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.m/quilts.htmlをデモンストレーションするページを次に示します。

初めて画像を読み込んだときに画像のサイズを適切に変更する方法を誰かに教えていただければ幸いです。

4

1 に答える 1

0

OK、ページの読み込み時にキャッシュに画像を読み込むことで機能しました。写真がキャッシュにロードされたときにのみ適切にサイズ変更される理由はまだわかりませんが、これが私がこれまでに見つけた唯一の解決策です。$（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 に答える