Ennél a preloadernél, hogyan lehet azt megcsinálni, hogy mikor betöltődik a weboldal akkor eltűnjön halványulva?

Példa:

[link]

a lényeg, hogy az SVG-t beleraktam egy abszolút pozicionálású, a teljes oldalt elfedő fehér hátterű, teljesen átlátszatlan blokkba (#preloaderWrapper), amik együttesen elfednek egy igen nagy felbontású, nagy méretű képet.

Itt lép közbe a Javascript: ha letöltődik a kép (vagyis betöltődik a teljes oldal), akkor bekövetkezik a window elem load eseménye, amikor is az előbb említett átlátszatlan blokk kap egy "off" osztályt, aminek hatására 5 másodperc alatt átlátszóvá válik az említett blokk, és el is tűnik (hogy elérhető legyen az alatta levő tartalom).

#2: Kijelölöd, másolod és beilleszted a HTML-forráskódba.

#3: Akkor a szkriptbe csak ennyi kell:

let preloaderWrapper = document.querySelector('#preloaderWrapper');

window.setTimeout(function() {

preloaderWrapper.style.display='none';

}, 3000);

* a document.querySelector()

[link]

kiválasztja a megfelelő elemet - jelen esetben a "preloaderWrapper" azonosítójút (id attribútummal rendelkezőt) - és helyezi el a preloaderWrapper nevű változóban

* a window.setTimeout()

[link]

felel azért, hogy az első paraméterében megadott függvény a második paraméterében megadott idő elteltével fusson le

* egy adott elem style.display értékének 'none'-ra állításával meg elrejthető az adott elem (lényegében Javascriptből szabályozzuk az elem style attribútumában meghatározott CSS-tulajdonságát)

"Viszont az az svg fájlt azt honnét tölti be valami külső szerverre fel van töltve és onnét?"

Nem.

Mivel az <svg> különálló HTML-elem:

[link]

simán belerakhatod az oldal HTML-forrásába (ezért lehetett a CodePenben és JSFiddle-ben CSS-sel formázni).

Így néz ki teljes egészében:

[link]

#8: Barátod a CSS media queries:

[link]

de még Javascripttel is kivitelezheted:

[link]