ugrás a tartalomhoz

window.onload

neogee · 2010. Okt. 19. (K), 22.08
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! :))
‹ CSS overflow? body bockground css ›
 ■
1

Biztosan kell az onload?

Kevlar · 2010. Okt. 19. (K), 22.43
Hát, abba tényleg nem megyek bele, hogy ez úgy szörnyű, ahogy van.
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...
3

Teljesen igazad van... Éppen

neogee · 2010. Okt. 19. (K), 22.53
Teljesen igazad van... Éppen a szarból próbálok várat...

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...
9

Perszehogynem. Amikor a

deejayy · 2010. Okt. 20. (Sze), 14.09
Perszehogynem. Amikor a script lefut, még nincsenek olyan objektumok (vagy nem tudja a félkész dom struktúra miatt beazonosítani), így nem csinál semmit.
Nincs ezen mit csodálkozni.
2

clickCatcher

Poetro · 2010. Okt. 19. (K), 22.52
Ajánlom a figyelmedbe a Robert Nyman clickCatcher scriptjét, amiből én csináltam egy kicsit szebb változatot. A lényeg, hogy azon linkeknek adsz egy catch osztályt, melyek nem akarod hogy éljenek egy ideig, majd mikor már léhetnek, akkor meghívod a clickCatcher.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.
4

Ez egy szimpatikus megoldás,

neogee · 2010. Okt. 19. (K), 23.00
Ez egy szimpatikus megoldás, és meg is fogom nézni! Köszönöm!
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!
5

onload

Poetro · 2010. Okt. 20. (Sze), 00.36
Igazából nem is kell az 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.
6

Hmm,

neogee · 2010. Okt. 20. (Sze), 09.28
Most akkor mi a helyes megoldás? :)
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. :(
7

próbáld ki.. :)

ironwill · 2010. Okt. 20. (Sze), 11.03
Próbáld ki és látni fogod, hogy mi különbség.. :)
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)
//head
<script type="text/javascript">
function test() {
  ..
}
</script>
</head>

<body>
..
<div class="images">
..
</div>
<script type="text/javascript">
test();
</script>
..
8

Script

Poetro · 2010. Okt. 20. (Sze), 12.28
Mind a Yahoo mind a Google ajánlása szerint érdemes a JavaScript-et a fájl végére a </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 benne document.write, ami módosítja a megjelenítendő tartalmat, és a document.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:
window.addEvent('domready', function() {
    alert('The DOM is ready!');
});
jQuery esetén:
jQuery(document).ready(function ($) {
    alert('The DOM is ready!');
});
Prototype esetén:
document.observe("dom:loaded", function() {
    alert('The DOM is ready!');
});
YUI esetén:
YAHOO.util.Event.onDOMReady(function() {
    alert('The DOM is ready!');
});
Dojo Toolkit esetén:
dojo.addOnLoad(function(){
    alert('The DOM is ready!');
});
10

Akkor annyira mégsem voltam

neogee · 2010. Okt. 20. (Sze), 20.09
Akkor annyira mégsem voltam összezavarodva. Az én fejemben is valami hasonló kép állt össze. Még annyit szeretnék kérdezni, hogy szerintetek melyik js frameworköt érdemes kezdésnek elsajátítani, vagy melyik a legkeresettebb? Melyik miben erős? Esetleg vannak-e az ajánlott FW-höz könyvek, vagy tutorialokból, és dokumentációs példákból kell megtanulni? :)
11

Kinek a pap...

Poetro · 2010. Okt. 20. (Sze), 20.53
...kinek a papné. Fentebb a legnépszerűbbeket soroltam fel, közülük talán a legtöbb anyag jQuery-hez, Prototype-hoz, és Dojo-hoz van. Könyv is valószínűleg létezik mindhez, érdemes az Apress, Manning, O'Reilly és Packt könyveket érdemes megnézni, de valószínűleg jQuery-ről fogsz legtöbb könyvet találni. Mindegyik teljesen más szemléletet követ, igazából azt érdemes választani, ami neked leginkább tetszik, de érdemesebb többet kipróbálni.
12

Ma pl a mootoolsal

neogee · 2010. Okt. 20. (Sze), 21.33
Ma pl a mootoolsal ismerkedtem meg picit. :) Belelestem mi is az és hogyan és merre, és elég szimpatikus volt. Ha jól láttam meglehetősen egyszerű a felépítése kezelhetőségi szempontból, de csak néhány pillantást vetettem rá. :) Aminek a nevét még sokat hallom, az a jQuery, valószínűleg azzal mindenképpen meg kellene barátkoznom... Bár annyira valamiért nem szimpi...

Minden esetre köszönöm szépen a válaszokat, és a segítséget is, utána nézek ezeknek komolyabban is. :)