IFramy v jazyku HTML - javascript, html

Používam iframe v html.loading rôznych html stránok do iframes.in, že html stránky mám obraz. kedykoľvek načítať obrázok do rámčekov iframe, ktoré sa mi blikajú.

môžeme zabrániť tomu, aby blikajúc pomocou Iframe

Ako na to ?

odpovede:

Existuje niekoľko vecí, ktoré môžete s tým pomôcť.

Najskôr sa uistite, že zadáte šírku a výšku obrázka. Prehliadač potom rezervuje miesto pre obrázok, a nie zmenu veľkosti rezervovaného priestoru, keď je známa veľkosť snímky.

Pokiaľ chcete uviesť príklad, môžeme hovoriť o predbežnom načítaní, ak to bude potrebné.

Hmm, nie som si úplne istý, aký druh blikania sa chcete zbaviť, ale ja si to predstavujem v súvislosti s načítaním prehliadača a potom zobrazením vašej novej stránky s obrázkom.

No nemôžem myslieť na žiadne dobré spôsoby, okrem načítania ďalšieho obrazu do inej iframe na pozadí a potom prepínanie medzi aktuálne viditeľnou a novo nabitou iframe.

Čím je väčšia otázka, prečo potrebujete použiť rámčeky iframe? Načítavate niečo zo stránok, ktoré nevlastníte? Ak nie, zvážte ajax a ďalšie podobné techniky.

Môžete sa vyhnúť blikaniu pridaním funkcie onLoadspätná väzba na udalosť. Keď spustíte spätné volanie na zariadení OnLoad, budete schopní vyblednúť v rámci iframe a jeho obsahu. Tak funguje Lazy Loading. Príklad:

<iframe id="ifrm" src="http://www.example.com" onload="showImage()"></iframe>

Vo vyššie uvedenom príklade bude Iframe vykresľovať vašeObsah. Po dokončení načítania vyššie uvedeného iframe sa pokúsi zavolať funkciu naznačujúcu showImage (). Jediné, čo musíte urobiť, je definovať showImage v súbore skriptu. Teraz môžete použiť túto funkciu na nájdenie uzla iframe DOM a zmenu štýlu na jeho vyblednutie alebo zobrazenie (zobrazenie: blok). Príklad:

<script>
function showImage() {
var iframe = document.getElementById("ifrm");
iframe.style.opacity = 1; // using opacity. You can transition this
iframe.style.display = "block" // using display. No transition
}

</script>

Ak by ste chceli vyprchať, môžete do vášho iframe pridať nejaké css ako nižšie. Príklad:

#ifrm {
opacity: 0; // Before the iframe load, make sure it is not visible
transition: 0.3s // This will make your iframe fade in on load
}

Dúfam, že to pomôže.