Bazı Javascript tarayıcı penceresine sığdırmak için büyük resmi yeniden boyutlandırmak için yazıyorum. (Kaynak görüntülerin boyutunu ne yazık ki kontrol edemem.)

Bu HTML olacak gibi

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

Bana eğer img etiketi src resmi indirildi olmadığını belirlemek için bir yolu var mı?

Eğer $(document).ready() tarayıcı resmi yükledi önce yürütülen bir sorun haline çalışan olduğum için buna ihtiyacım var. $("#photo").width() $("#photo").height() yer tutucu boyutu (alt metin) dönecektir. Benim durumumda bu 134 gibi bir şey x 20.

Şu an sadece eğer fotoğrafın yüksekliği 150, ve eğer öyleyse sadece alt metin olduğunu varsayarak daha az kontrol ediyorum. Ama bu tam bir hack ve ne olacağını bir fotoğraf az 150 piksel uzunluğunda (muhtemelen benim özel durumda), ya da alt metni fazla 150 piksel uzunluğunda (muhtemelen başına bir küçük tarayıcı penceresi).

< / ^ hr .

Düzenleme:Herkes kodunu görmek isteyen:

$(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));
  }

});

< / ^ hr .

Güncelleme: Önerileriniz için teşekkürler. Olay riski varsa $("#photo").load olay için bir geri arama hazırlayayım mı kovulma yok, doğrudan yüklendiğinde olayı resim etiketi üzerinde tanımlanmış. Kayıt için, burada kodu ile sona erdi:

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

});

Bir olay dinleyici ekleyin veya resim yüklendiğinde kendini ilan var. Gelen boyutları sonra anlarız.

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