www.webdeveloper.com
Results 1 to 13 of 13

Thread: Should this preload code work

  1. #1
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277

    Should this preload code work

    Hi,

    I have written a script which should technically load all the images that I have specified in the script. However I am testing on my computer, using localhost and when the page loads up some of the images still have not been loaded. Is this just because I am testing it locally and my server is too quick at showing the page before all the images are loaded.

    Thanks in advance,

    Ben
    Attached Files Attached Files

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Usually a preload script is not enclosed in a function. So, it all depends on when you call the function as to whether it does anything useful or not.

  3. #3
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    I have called it in body onload

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    No, if you call something onload, the page will load and then the function will run.
    Great wit and madness are near allied, and fine a line their bounds divide.

  5. #5
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    So where shall I call the function in order to preload the images before it displays the body?

  6. #6
    Join Date
    Jun 2007
    Posts
    667
    It will be unreliable at best because it uses a volatile array that is destroyed
    before all the images finish downloading.

    Try it like this:
    Code:
    function Preload( imagesArray ) 
    {
    		this.image = new Array();		
    		
    		for(var i=0; i <imagesArray.length; i++) {
    			this.image[i] = new Image();
    			this.image[i].src = imagesArray[i];
    		}
    		loading();	
    }
    
    new Preload([
    		"../images/body/back.jpg",
    		"../images/body/cropAMPM.jpg",
    		"../images/body/cropAC.jpg",
    		"../images/body/cropCB.jpg",
    		"../images/navigation/bslftCorn.gif",
    		"../images/navigation/bsrhtCorn.gif",
    		"../images/navigation/bsMid.gif",
    		"../images/navigation/bsMidOn.gif",
    		"../images/body/SMFoot.gif",
    		"../images/navigation/darkOff.gif",
    		"../images/navigation/darkOn.gif",
    		"../images/navigation/bsrhtCornOn.gif",
    		"../images/navigation/bslftCornOn.gif",
    		"../images/navigation/navigator.jpg",
    		"../images/navigation/subTop.png",
    		"../images/navigation/subMid.gif",
    		"../images/navigation/subBot.gif",
    		"../images/body/loading.swf"
    		]);
    Y_U U_G_A_E_U_ B_S_A_D_

  7. #7
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    thank you but where shall I call the function from?

  8. #8
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by Benji6996 View Post
    thank you but where shall I call the function from?
    Immediately after its definition, exactly as shown.
    Y_U U_G_A_E_U_ B_S_A_D_

  9. #9
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    Thanks very much, however it does not seem to be working, I have the function defined in a separate functions.js document. Will this be why?

    What does the 'new' mean before you call the function?

    Thanks in advance

  10. #10
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by Benji6996 View Post
    Thanks very much, however it does not seem to be working, I have the function defined in a separate functions.js document. Will this be why?

    What does the 'new' mean before you call the function?
    Presumably the file is included before it's called, unless it's called in the same file.
    Any console errors?
    Are the paths correct?
    Can't help without seeing everything.

    You're welcome in advance.
    Y_U U_G_A_E_U_ B_S_A_D_

  11. #11
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    Basically the attached code should explain what I am trying to do. As the page is loading I display a loading animation, once the page is loaded I then display the content on the page. That is why I call the loading() function after the preload function is done. However the loading function was working before I introduced this new preload() function.

    No errors are being displayed from the preload function, but an error is being displayed from the loading function. It says that an 'object is expected on line xx' the line it is talking is referring to the line in the loading function that declares the variable mnCont. I think it is not working because it is trying to display the 'mnCont' which has not been loaded by the time the function has called it.

    Hope this all makes sense, thanks
    Attached Files Attached Files

  12. #12
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by Benji6996 View Post
    No errors are being displayed from the preload function, but an error is being displayed from the loading function. It says that an 'object is expected on line xx' the line it is talking is referring to the line in the loading function that declares the variable mnCont. I think it is not working because it is trying to display the 'mnCont' which has not been loaded by the time the function has called it.
    Then include the .js file somewhere below the 'mnCont' element.
    Y_U U_G_A_E_U_ B_S_A_D_

  13. #13
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    okay done and that fixes that problem, however I do not think it is preloading the images and the loading animation is not being displayed whilst the page is loading. The body is shown immediately. Any ideas?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles