window.onload
Sziasztok,
Van egy oldal (www.mikulasorszag.hu), amit nem én csináltam, viszont most bele kell nyúlnom. Hányingerem is van tőle... Ha megnézitek a forrást, rájöttök miért... Bár már a háttérzene is eléggé árulkodó...
Lényeg a lényeg, hogy azt kellett megvalósítanom, hogy a menüpontokban a szövegek elé elhelyezett képekre történő kattintáskor szépen a weblap elé, "kinagyítódjon" a kép. Fontos szempont volt továbbá, hogy a lehető legtöbb ember tudja megnézni a képeket, így az is, akinek van js támogatása, és az is akinek valamilyen okból kifolyólag nincsen. Erre kínál ügye megoldást a diszkrét javascript. Meg is oldottam a feladatot. Mivel elég új még nekem ez a témakör, ezért a weblabor diszkrét javascript cikkét használtam segítségül - hatalmas köszönet is érte! :) -, és sikerült is megoldani teljesen tökéletesen.
De mint általában, a dolgok most sem ilyen egyszerűek. Ügye a window.onload eseményhez kötöttem hozzá a képek click eseménykezelőjének hozzáadását. A window.onload esemény pedig akkor fut le, ha az oldal betöltése eléri a 100%-ot. És éppen ez a gond... A weblap tulajdonosa nem tud megbékélni a gondolattal, hogy egy kevés ideig, amíg a betöltés tart, addig új lapon nyílnak meg a képek.
Nem tudtok valami megoldást erre a problémára amivel anélkül tudnék javítani a betöltési időn, hogy újra kellene terveznem az egészet? Őszintén szólva nem fizetnek annyit, hogy újratervezzem az egészet... Másrészt pedig nem is igazán szívügyem, és időm sincsen rá...
weblap: http://mikulasorszag.hu
js file: http://mikulasorszag.hu/gallery.js
Még annyit hozzátennék, hogy eredetileg még a hó is esett az oldalon, na erre varjatok gombot!! :D
A válaszokat előre is köszönöm szépen! :))
■ Van egy oldal (www.mikulasorszag.hu), amit nem én csináltam, viszont most bele kell nyúlnom. Hányingerem is van tőle... Ha megnézitek a forrást, rájöttök miért... Bár már a háttérzene is eléggé árulkodó...
Lényeg a lényeg, hogy azt kellett megvalósítanom, hogy a menüpontokban a szövegek elé elhelyezett képekre történő kattintáskor szépen a weblap elé, "kinagyítódjon" a kép. Fontos szempont volt továbbá, hogy a lehető legtöbb ember tudja megnézni a képeket, így az is, akinek van js támogatása, és az is akinek valamilyen okból kifolyólag nincsen. Erre kínál ügye megoldást a diszkrét javascript. Meg is oldottam a feladatot. Mivel elég új még nekem ez a témakör, ezért a weblabor diszkrét javascript cikkét használtam segítségül - hatalmas köszönet is érte! :) -, és sikerült is megoldani teljesen tökéletesen.
De mint általában, a dolgok most sem ilyen egyszerűek. Ügye a window.onload eseményhez kötöttem hozzá a képek click eseménykezelőjének hozzáadását. A window.onload esemény pedig akkor fut le, ha az oldal betöltése eléri a 100%-ot. És éppen ez a gond... A weblap tulajdonosa nem tud megbékélni a gondolattal, hogy egy kevés ideig, amíg a betöltés tart, addig új lapon nyílnak meg a képek.
Nem tudtok valami megoldást erre a problémára amivel anélkül tudnék javítani a betöltési időn, hogy újra kellene terveznem az egészet? Őszintén szólva nem fizetnek annyit, hogy újratervezzem az egészet... Másrészt pedig nem is igazán szívügyem, és időm sincsen rá...
weblap: http://mikulasorszag.hu
js file: http://mikulasorszag.hu/gallery.js
Még annyit hozzátennék, hogy eredetileg még a hó is esett az oldalon, na erre varjatok gombot!! :D
A válaszokat előre is köszönöm szépen! :))
Biztosan kell az onload?
Nekem gyors a netem, így nem érzékelem igazán a problémát.
Esetleg érdemes gyorsítani amin lehet (css és js tömörítés, sprite-ok, sallangok kigyomlálása), persze ez rengeteg munka, amit biztosan nem fizetne meg a megrendelő.
De biztosan kell, hogy csak onload-ra tedd rá az eseményt? Csúnya megoldás, de a cserét végző function-t teheted egy JS file-ba a forrás elejére, a head-be, és a linkeknek onclick-re teszed a hívást, href-be az eredeti címet, és akkor megmarad a diszkrét jelleg is.
"Egy frászt, én vagyok a télapó!" - Ez nagyon idegesítő, szomorú, hogy 2010-ben még azt hiszi valaki, hogy a látogató zenélő honlapot akar nézni...
Teljesen igazad van... Éppen
De visszatérve a a megvalósításra... Igen erre gondoltam én is, hogy nem onloadon indítom el a hozzárendelést, hanem kapásból meghívom a hozzárendelő függvényt, de ez valamiért nem akar működni... nem adja hozzá a képekhez az eseményt. Az onclicket pedig szerettem volna elkerülni, de ha jóllátom, akkor nem lesz más választásom...
Perszehogynem. Amikor a
Nincs ezen mit csodálkozni.
clickCatcher
catch
osztályt, melyek nem akarod hogy éljenek egy ideig, majd mikor már léhetnek, akkor meghívod aclickCatcher.callClicks
függvényt. Ekkor az összes ezeken történt kattintás le fog futni egymás után, és minden további katintás is teljesen normálisan fog működni.Ez egy szimpatikus megoldás,
Ellenben nem oldja meg a problémámat, mi szerint a tulaj azonnali kattintást akar... Másrészt lehet minden haja szála az égnek állna, ha a betöltésig össze vissza kattint, mondván: miért nem működik ez a szar?, majd egyszercsak 200 kép váltakozik hirtelen egymás után... :D Mondjuk az arcát megnézném!! :))))
Minden esetre más helyzetekben hasznos lehet! Megnézem mindenképpen!
Köszönöm még egyszer!
onload
onload
, elég ha a szkriptedet a fájl végére, közvetlenül a</body>
elé rakod. Ekkor mivel a neked szükséges DOM elemek már léteznek, azokra szabadon pakolhatsz eseménykezelőket.Hmm,
Több helyen olvastam, hogy a js-t célszerű a head-ben elhelyezni. Ugyanakkor, azt is olvastam több helyen, hogy a lap végére kell tenni, mert a js futása valamiféleképpen blokkolja az oldal betöltését, vagy valami ilyesmi. Plusz ügye ha a head-be kerül, akkor ha még a lap betöltése előtt módosítást kell elvégezni a dokumentumon, akkor erre ügye a DOM még nem áll készen.
Aztán a másik nagy kérdés számomra, hogy akkor kell-e az addEvent( obj , 'event' , handlerFunction );, vagy nem kell, illetve ha kell, akkor milyen esetekben? Nyilván, ha valamilyen eseményhez szeretnék kapcsolni valamilyen műveletvégzést, akkor így szép a megoldás. De az pl nem tiszta, hogy ha szeretnék mondjuk a linkekhez, és tegyük fel a képekhez click eseményt kapcsolni, akkor kell-e addEvent( window , 'load' , setLinkAndImgClick), vagy elég, ha a html végén egyszerűen meghívom a függvényt, ami beállítja a képek és a linkek eseményét?
Sorry, hogy ilyen hülyeségekkel traktállak titeket, de butuska vagyok és picit nekem még zavaros ez a víz sajnos. :(
próbáld ki.. :)
Ha a head-be teszed, akkor a script a DOM felépülése előtt fut le és megakasztja az oldal, a formázások betöltődését (a neted sebességétől függően látványos, vagy sem).
Ezért szokták vagy a body végébe, vagy a DOM felépülését megvárva, onload-ra beállítani a script futását.
Ha kisebb js-ről van szó és nincs jelentős késleltetés, akkor az is megoldás lehet, hogy közvetlenül a DOM elem mögé teszed a script-et. (így miután megjelennek a képek, már használható is az onclick-jük)
Script
</body>
elé tenni. Mivel így az oldalad már lényegében le van töltődve, mire a<script>
letöltése miatt az oldal blokkolódna.Miért blokkolódik az oldal letöltődése, és megjelenítése a
<script>
elem miatt? Azért mert lehet bennedocument.write
, ami módosítja a megjelenítendő tartalmat, és adocument.write
csak akkor működik, ha az oldal renderelését megállítjuk.Tegyük fel, hogy az oldaladon van 200Kb JavaScript. Ha ezt mind a
<head>
teszed, akkor meg kell várni, hogy az a 200Kb letöltődjön, mielőtt akár csak el is tud kezdődni a tartalom megjelenítése. Addig se a képek, se semmi nem kezd el töltődni a tartalomból.A DOM műveletekkel pedig csak olyan tartalmakat célozhatsz, amik már részei a DOM fának, és ha a
<script>
a<head>
-ben van, akkor még nem létezik szinte semmi a DOM fából, legfeljebb a<head>
. Ha viszont a<script>
a<body>
végére teszed, akkor a DOM fa igazából már létezik, azaz minden ami neked kell már ott van, készen arra, hogy megcélozd JavaScript-tel. Persze bizonyos dolgok még nem fognak működni, amíg a DOM még nincs teljesen kész, de eseményeket szabadon adhatsz az elemekhez. Amik esetleg nem fognak működni, főleg IE esetében, azok az olyan DOM műveletek, amik új elemeket szúrnak be a DOM-ba, vagy törölnek belőle, pár kivételtől eltekintve.Ezekhez érdemes megvárni míg a DOM készen áll (document / dom ready). Ez annyival jobb mind a
window
load
eseménye, hogy nem kell minden elemnek betöltődni, elég ha a DOM már készen áll. Ehhez minden keretrendszer csinált saját eseményt.MooTools esetén:
Akkor annyira mégsem voltam
Kinek a pap...
Ma pl a mootoolsal
Minden esetre köszönöm szépen a válaszokat, és a segítséget is, utána nézek ezeknek komolyabban is. :)