Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Proste sklaowanie obrazka
Forum PHP.pl > Forum > Przedszkole
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
Cytat
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
  1. $(document).ready(function()
  2. {
  3. var iMaxW = 550,
  4. sWait = 'http://rlv.zcache.com/worth_the_wait_pc_hourglass_icon_photosculpture-p1539141672349109753s98_400.jpg';
  5. $("img").each(function(index) {
  6. var oImg = new Image,
  7. sImg = this.src,
  8. thatImg = this;
  9. oImg.onload = function(){
  10. var iW = this.width, iH = this.height, iNewH;
  11. alert([iW,'x',iH].join(''));
  12. if(iW>iMaxW){ /**
  13. po co usuwać obrazek?? - po prostu lepiej go przeskalować coby widoku
  14. nie popsuł a transfer nie Twoja sprawa ;]
  15.  
  16. a jeśli obawiasz się, że opóźni wczytywanie strony to niestety już przy wczytywaniu
  17. obrazka przez skrypt do sprawdzania rozmiaru już to zrobiłeś - trza by to po stronie php rozwiązać
  18. *
  19. */
  20. iNewH = ~~(iH*iMaxW/iW);
  21. thatImg.setAttribute('width', [iMaxW,'px'].join(''));
  22. thatImg.setAttribute('height', [iNewH,'px'].join(''));
  23. }
  24. thatImg.src = sImg;
  25. }
  26. oImg.src = this.src;
  27. this.src = sWait;
  28. });
  29. });
[JAVASCRIPT] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.