| 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 |
#2 · Zasláno: 8. 12. 2015, 01:21:56
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 |
#4 · Zasláno: 8. 12. 2015, 10:40:29
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 |
#5 · Zasláno: 8. 12. 2015, 10:45:44
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 |
#7 · Zasláno: 8. 12. 2015, 11:14:17
Trejpa:
Určite je vhodná vlastnosť clientWidth namiesto vlastnosti width? Aby bola tvoja ukážka trochu univerzálnejšia: Živá ukázka
|
||
| patysta Profil |
#8 · Zasláno: 8. 12. 2015, 17:21:06
To je přesně to, co jsem hledal. Díky za rady.
|
||
| Trejpa Profil |
#9 · Zasláno: 8. 12. 2015, 20:21:38
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ů. |
||
|
Časová prodleva: 8 let
|
|||
0