Bildgröße auslesen

[kointa]

Hi all,

wie schaffe ich es dass mein FireFox die richtige Bildgröße erkennt, anstatt nur für Höhe und Breite jeweils 0 ?

Ich muss das Bild erst im Hintergrund laden damit es im cache ist, dann erkennt er es richtig.

Ich will jetzt aber abhängig von der Bildgröße unterschiedliche funktionen ausführen. Die eine soll alle bilder >= ca 200px auf 50% stauchen und die andere soll nichts verändern.

folgende funktion habe ich:

  
function loadPic(href)  
{  
    var picURL = "http://www.site.extra.hu/Fun/Pics/"; // Pfad zu den Videos  
    var pics = new Array();  
    var picNum = false;  
    var loadPic = '';  
  
    pics[1] = "EURO%202008/Kreuzlingen%201.jpg";  
    pics[2] = "EURO%202008/Kreuzlingen%202.jpg";  
    pics[3] = "faildog.gif";  
    pics[4] = "pingu.gif";  
    pics[5] = "Carina%20Nebula.jpg";  
    pics[6] = "Orion%20Nebula.jpg";  
  
    // angefordertes Bild ermitteln  
    if (href && href.match(/(\?|&)pic=\d+/i))  
    {  
        // gültiges Linkziel gefunden  
        picNum = href.replace(/^.*(\?|&)pic=(\d+).*/i, "$2");  
    }  
  
    if (picNum && pics[picNum])  
    {  
         // URL zum Bild  
        loadPic = picURL + pics[picNum];  
  
        if (loadPic.width <= '200px')  
        {  
                 document.getElementById('player').innerHTML="<img src='"+loadPic+"'></embed>";  
                window.scrollTo(0,0);  
        }  
  
        else  
        {  
                 document.getElementById('player').innerHTML="<img src='"+loadPic+"' width='50%'></embed>";  
                window.scrollTo(0,0);  
        }  
    }  
}  

hat jdn eine idee wie ich das am elegantesten löse?
ich muss die datei ja irgendwie in den cache laden oder mit onload arbeiten, aber habs bis jetzt nicht hingekriegt.

vielen dank im voraus.

grüße
kointa

[Snafu]

Hallo!

Ich muss das Bild erst im Hintergrund laden damit es im cache ist, dann erkennt er es richtig.

Mit new Image() erzeugst du ein neues Image Objekt.
Schau dir einmal http://de.selfhtml.org/javascript/beispiele/buttons.htm#quelltext an.
Da wirds z.B. verwendet.

[kointa]

Mit new Image() erzeugst du ein neues Image Objekt.
Schau dir einmal http://de.selfhtml.org/javascript/beispiele/buttons.htm#quelltext an.
Da wirds z.B. verwendet.

Danke es klappt!

neue funktion:

  
if (picNum && pics[picNum])  
    {  
         // URL zum Bild  
        loadPic = picURL + pics[picNum];  
  
        var picture = new Image();  
        picture.src = loadPic;  
        picture.onload = function ()  
        {  
  if (picture.width <= '700')  
          {  
           alert(picture.width);  
                  document.getElementById('player').innerHTML="<img src='"+loadPic+"'></embed>";  
   window.scrollTo(0,0);  
          }  
  else  
                 {  
                         alert(picture.width);  
                  document.getElementById('player').innerHTML="<img src='"+loadPic+"' width='50%'></embed>";  
   window.scrollTo(0,0);  
                 }  
        }  
    }  

[amolip]

Hallo kointa!

Danke es klappt!

Ja, meistens - aber dummerweise nicht immer.

Wenn sich ein Bild bereits im Cache befindet, wird von manchen Browsern das onload-Ereignis grundsätzlich nicht ausgelöst (kenne ich vom Hörensagen) und von manchen Browsern wird das onload-Ereignis "nur" unter bestimmten Bedingungen (kenne ich vom IE7) nicht ausgelöst. Kurzum, es ist nicht zuverlässig.

Du solltest daher überprüfen, ob die Bildinformationen bereits zur Verfügung stehen und deine Funktion dann entweder "manuell" oder eben per Ereignis aufrufen.

Gruß Uwe

[Gunnar Bittersmann]

@@kointa:

Ich will jetzt aber abhängig von der Bildgröße unterschiedliche funktionen ausführen. Die eine soll alle bilder >= ca 200px auf 50% stauchen und die andere soll nichts verändern.

Hältst du es für sinnvoll, bei sowieso schon großen Bildern etwa die vierfache Datenmenge von dem, was zur Anzeige benötigt wird, übers Web zum Nutzer zu schicken? WWW = weltweites Warten? Ich halte es für Unfug.

Du solltest die Bildgrößen _server_seitig auslesen und entsprechend darauf reagieren, also die Bildgröße runterrechnen und sinnvollerweise das kleine Bild auf dem Server speichern, damit dies nicht bei jedem Seitenaufruf erneut gemacht werden muss.

PHP bietet die dafür notwendigen Funktionen (Imagick). Nichts mit JavaScript.

Live long and prosper,
Gunnar