Nohana Posted November 27, 2008 Share Posted November 27, 2008 Hello,I'm currently designing a small JS game and I would like it to have a loading screen (like in flash games), so that the user doesn't need to go through the hassle of downloading anything when the game is running. So far, I've thought of -but haven't actually implemented- using a separate <div> to store all image files the game uses and when this <div> is fully loaded (and therefore all images), I'd use the onload functionality (e.g <div onload="StartGame()>).But I'm not sure whether this will work... Does anyone know any simpler/better way of creating a loading screen for JS games? Tutorials, links, anything is welcome and appreciated. Thanks in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted November 27, 2008 Share Posted November 27, 2008 The onload event only works on the window and image objects. As an attribute, it can only be used on <body> and <img> tags.You'd have to count how many images there are, add an onload event to each of them summing 1 to a variable, that will display the page when the variable is equal to the number of images on the page. Link to comment Share on other sites More sharing options...
Synook Posted December 1, 2008 Share Posted December 1, 2008 Actually, the IMG tag does not have an onload attribute. From the HTML 4 DTD <!ELEMENT IMG - O EMPTY -- Embedded image --><!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URI; #REQUIRED -- URI of image to embed -- alt %Text; #REQUIRED -- short description -- longdesc %URI; #IMPLIED -- link to long description (complements alt) -- name CDATA #IMPLIED -- name of image for scripting -- height %Length; #IMPLIED -- override height -- width %Length; #IMPLIED -- override width -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- > which extends <!ENTITY % coreattrs "id ID #IMPLIED -- document-wide unique id -- class CDATA #IMPLIED -- space-separated list of classes -- style %StyleSheet; #IMPLIED -- associated style info -- title %Text; #IMPLIED -- advisory title --" > <!ENTITY % i18n "lang %LanguageCode; #IMPLIED -- language code -- dir (ltr|rtl) #IMPLIED -- direction for weak/neutral text --" > <!ENTITY % events "onclick %Script; #IMPLIED -- a pointer button was clicked -- ondblclick %Script; #IMPLIED -- a pointer button was double clicked-- onmousedown %Script; #IMPLIED -- a pointer button was pressed down -- onmouseup %Script; #IMPLIED -- a pointer button was released -- onmouseover %Script; #IMPLIED -- a pointer was moved onto -- onmousemove %Script; #IMPLIED -- a pointer was moved within -- onmouseout %Script; #IMPLIED -- a pointer was moved away -- onkeypress %Script; #IMPLIED -- a key was pressed and released -- onkeydown %Script; #IMPLIED -- a key was pressed down -- onkeyup %Script; #IMPLIED -- a key was released --" > which does not describe the onload attribute. In contrast, the BODY element's definition reads: <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --><!ATTLIST BODY %attrs; -- %coreattrs, %i18n, %events -- onload %Script; #IMPLIED -- the document has been loaded -- onunload %Script; #IMPLIED -- the document has been removed -- > But you can still attach an onload event handler to <img /> nodes via the DOM. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.