[JavaScript] Proste sklaowanie obrazka Opcje

[-lukasamd-]

Witam,
chciałbym sobie na forum dodać skrypt, który automatycznie pomniejszałby zbyt duże obrazki i zamieniał je na linki (tzn. dodanie stylu max-width i max-height, oraz linku).

Mam oto coś takiego co używa jquery:

Kod

$(document).ready(function()
{
  $("img").each(function(index) {
    var img = $(this);

    
    alert(img.attr("width") + 'x' + img.attr("height"));

    if ( img.attr("width") > 550)
    {
      $(img).replaceWith('aaaa');
    }

  });
  
});

Niestety, nie działa to zbyt logicznie.
Po pierwsze, w FF czy Operze zwraca dziwne wymiary - dla obrazka 1600x1000px pokazało 43x19px. Mimo to zamienia na napis.
W Chrome pokazuje 0x0 i nie zmienia...

Wydaje mi się, że w chwili wywołania alertu nie cały jest wczytany, stąd taka dziwna informacja. Potem jest już więcej informacji = zmniejsza.

No ale jak zrobić to tak, aby naprawdę działało, do tego również w Chrome?
Czy w ogóle taki sposób pobierania wymiarów ma tu sens?

[wookieb]

Po pierwsze, w FF czy Operze zwraca dziwne wymiary - dla obrazka 1600x1000px pokazało 43x19px. Mimo to zamienia na napis.

Musisz się jeszcze podpiąć pod zdarzenie .load dla obrazka, aby odczytać jego właściwe wymiary. 43 na 19 jest to rozmiar małek ikonki pokazującej, że obrazek jeszcze się nie załadował.
Dlaczego tak się dzieje? .ready jest wywoływane kiedy cały HTML zostanie zassany a nie jak całą strona zostanie załadowana (wraz z obrazkami)

[zegarek84]

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function()
{
  var iMaxW = 550,
  sWait = 'http://rlv.zcache.com/worth_the_wait_pc_hourglass_icon_photosculpture-p1539141672349109753s98_400.jpg';
  $("img").each(function(index) {
    var oImg = new Image,
    sImg = this.src,
    thatImg = this;
    oImg.onload = function(){
      var iW = this.width, iH = this.height, iNewH;
      alert([iW,'x',iH].join(''));
      if(iW>iMaxW){ /**
po co usuwać obrazek?? - po prostu lepiej go przeskalować coby widoku
nie popsuł a transfer nie Twoja sprawa ;]
 
a jeśli obawiasz się, że opóźni wczytywanie strony to niestety już przy wczytywaniu
obrazka przez skrypt do sprawdzania rozmiaru już to zrobiłeś - trza by to po stronie php rozwiązać
*
*/
        iNewH = ~~(iH*iMaxW/iW);
        thatImg.setAttribute('width', [iMaxW,'px'].join(''));
        thatImg.setAttribute('height', [iNewH,'px'].join(''));
      }
      thatImg.src = sImg;
    }
    oImg.src = this.src;
    this.src = sWait;
  });
});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował zegarek84 28.11.2010, 19:36:35