Čeká se na načtení obrázku v JavaScriptu

Provádím hovor Ajax, který mi vrátí nějaké informace včetně cesty k obrázku.

Všechny tyto informace připravím ve svém HTML, které se zobrazí jako druh vyskakovacího okna. Jen jsem přepnul viditelnost pomocí popup div ze skrytého na viditelné.

Abych nastavil pozici mého popup divu, musím počítat v závislosti na výšce obrázku. Musím tedy počkat, až se obrázek načte, abych poznal jeho rozměry, než nastavím polohu a přepnu viditelnost na viditelný.

Zkoušel jsem triky s rekurzí, setTimeout, complete img property, while loop… bez úspěchu.

Jak to tedy mohu udělat? Možná bych měl vrátit rozměry ve svém volání Ajaxu.

Odpověď

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Je důležité, abyste to udělali ve výše uvedeném pořadí:Nejprve připojte ovladač a pak nastavte src . Pokud to uděláte opačně a obrázek je v mezipaměti, můžete událost zmeškat. JavaScript se spouští v jednom vláknu v prohlížečích (pokud nepoužíváte webové pracovníky), ale prohlížeče nejsou jednovláknové. Je naprosto platné, že prohlížeč vidí src , identifikujte, zda je zdroj dostupný, načtěte jej, spusťte událost, podívejte se na prvek, abyste zjistili, zda má nějaké obslužné rutiny, které je třeba zařadit do fronty pro zpětné volání, nezobrazte žádné a dokončete zpracování události, vše mezi src šňůra a šňůra připevňující psovoda. (Ke zpětným voláním by mezi linkami nedocházelo, pokud by byly zaregistrovány, čekaly by ve frontě, ale pokud žádné nejsou, událost čekat nemusí.)