Autor Zpráva
patysta
Profil
Zdravím, mám dotaz, jak zjistit rozměry obrázku, který se zobrazí v nějaké funkci, ihned po jeho zobrazení. Pro srozumitelnost přidám příklad:

Po kliknutí na tlačítko chci v divu #test zobrazit obrázek a vypsat jeho šířku. Alert vrátí prázdnou hodnotu, obrázek je samozřejmě zobrazí.

<script>
    function zobraz(){
        document.getElementById("test").innerHTML = "<img src='foto01.jpg' id='fotka'>";
        var x = document.getElementById("fotka").style.width;
        alert(x);
    }
</script>

<body>
    <button onclick="zobraz();">test</button>
    <div id="test"></div>
</body>

Díky za rady
Trejpa
Profil
patysta:
Zjišťuješ šířku ze stylu, v němž žádná hodnota nastavena není, takže x je prázdný řetězec.
Musíš zjišťovat fyzickou velikost elementu. Místo .style.width použij .clientWidth.
ukázka

Upozorňuji, že během zpracování skriptu nemusí dojít ke stažení obrázku (pokud již není v keši), takže zjištěná hodnota nemusí odpovídat reálnému obrázku, ale třeba zástupnému symbolu nenačteného obrázku (viděl jsem tam i 24 bodů), případně jiné hodnotě. Proto by bylo vhodné s vyhodnocením šířky obrázku počkat do jeho načtení nebo ho nakešovat dříve.
patysta
Profil
Trejpa:
Díky za radu, ale je to přesně, jak říkáš. Pokud není v keši, tak má při prvním zobrazení šířku 0. Myslíš něco takového?

$("#fotka").load(function (){
    var x = $(this).width();
    alert(x);
})

Problém je ale v tom, že mi to funguje pouze, pokud je obrázek v dokumentu od začátku a jeho zobrazení není závislé na tlačítku nebo nějakém jiném eventu.
Keeehi
Profil
patysta:
Pokud ten obrázek přidáváš dynymicky (vytváříš element s ID fotka), musíš mu samozřejmě tu událost přidat.
patysta
Profil
Keeehi:
Díky za radu, ale mohl bys být konkrétnější?
Trejpa
Profil
patysta:
Záleží, kdy potom skript zjištěnou hodnotu potřebuje. Jestli se má vždy čekat do načtení obrázku, tak bych použil třeba druhou funkci závislou přímo na načtení obrázku: ukázka

(V Internet Exploreru však ani toto řešení není spolehlivé.)
_es
Profil
Trejpa:
Určite je vhodná vlastnosť clientWidth namiesto vlastnosti width? Aby bola tvoja ukážka trochu univerzálnejšia: Živá ukázka
patysta
Profil
To je přesně to, co jsem hledal. Díky za rady.
Trejpa
Profil
patysta:
Jenomže, stejně jako moje řešení, nefunguje v Internet Exploreru (testována verze 11), který vyvolává onload poněkud dříve a výsledkem je rozměr zástupného obrázku 28 bodů.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: