jquery

사용자의 브라우저 창에 맞게 큰 이미지의 크기를 조정하기 위해 Javascript를 작성하고 있습니다. (불행히도 소스 이미지의 크기를 제어하지 않습니다.)

따라서 다음과 같은 내용이 HTML에 있습니다.

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

src이미지 가 있는지 확인할 수있는 방법이 있습니까?img태그 가 다운로드 이 있습니까?

$(document).ready()브라우저가 이미지를로드하기 전에가 실행 되면 문제 가 발생하기 때문에 이것이 필요합니다 . $("#photo").width()그리고 $("#photo").height()자리 표시 자 (대체 텍스트)의 크기를 반환합니다. 제 경우에는 134 x 20과 같습니다.

지금은 사진의 높이가 150 미만인지 확인하고있는 경우 대체 텍스트라고 가정합니다. 그러나 이것은 꽤 해킹이며 사진의 높이가 150 픽셀 미만이거나 (내 특정 경우에는 가능성이 낮음) 대체 텍스트의 높이가 150 픽셀 이상인 경우 (작은 브라우저 창에서 발생할 수 있음) 중단됩니다. .

편집 : 코드를보고 싶은 사람 :

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

업데이트 : 제안 해 주셔서 감사합니다. 이벤트에 대한 콜백을 설정하면 이벤트가 발생하지 않을 위험이 $("#photo").load있으므로 이미지 태그에 직접 onLoad 이벤트를 정의했습니다. 기록을 위해 다음은 내가 사용한 코드입니다.

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

그런 다음 Javascript에서 :

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});