Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preload image script issues for a newbie!

    Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for.

    My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection.

    I have written a basic script, using the basic format of:

    <SCRIPT LANGUAGE="JavaScript">

    Image1= new Image(50,60)
    Image1.src = "something.gif"

    Image2 = new Image(70,80)
    Image2.src = "somethingelse"

    Image3 = new Image(90,100)
    Image3.src = "lastsomething.gif"

    </SCRIPT>

    and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?)

    Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks!

    <html>
    <head>
    <title>Finish Well Endurance</title>
    <meta name="generator" content="Namo WebEditor">
    <link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css">
    <script type="text/javascript"language="javascript"src="loadimages.js"></script>
    </head>

    <body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646">
    <table border="0" align="center" cellpadding="0" cellspacing="0" width="600">
    Last edited by plainsman; 12-10-2009 at 05:41 PM. Reason: typos

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    If the script is in a JS file, you don't need <script> tags.

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you saying that the body of the javascript file itself should look like this then?

    Image1= new Image(50,60)
    Image1.src = "something.gif"

    Image2 = new Image(70,80)
    Image2.src = "somethingelse"

    Image3 = new Image(90,100)
    Image3.src = "lastsomething.gif"

    I'll give that a try. Thanks for the tip.

    By the way, I've heard than some systems block scripts, and if so the actual language will display on screen. Isn't there a way to hide that if the browser doesn't do scripts?

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Yeah.

    Browsers only show the plain text source of scripts if they don't know what the script tags are; not if scripts are disabled.

    Some people wrap their javascript in HTML comments to ensure against this, but it's really not necessary nowadays, and should be avoided.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    The external .js file must not contain any HTML tags such as <script>.

    Scripts may be disabled by the user, but this is uncommon outside corporate environments. In that case they simply do not work.

    Long ago some browsers rendered the actual script unless it was wrapped in HTML hiding tags. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 and should not be used.

    <script language=javascript> is also long deprecated and obsolete. Use <script type = "text/javascript"> instead.

    NB Gusblake beat me to it!
    Last edited by Philip M; 12-10-2009 at 06:39 PM.

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again, both of you! So, just to be sure I follow 100%:

    No html in the script file itself, just the image=new image and scr lines.
    Load the images into and the .js in the rood directory along with the index file.
    Delete the script language reference from my html file to make it read like this:

    <script type="text/javascript"src="loadimages.js"></script>

    Does that sound right?

  • #7
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Yeah that should be OK.

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm. I pulled up the script file tonight and it turns out I did not use any html tags, so I guess that wasn't the issue. I did erase the language="javascript" part but still no go.

    You can see what it is doing here:

    http://www.fwe1.net

    Any other thoughts?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    In IE:

    Line2 Char 1
    image is undefined

  • #10
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Should be Image (JS is case sensitive)

    Edit - I also noticed another typo, scr instead of src

  • #11
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Rats! totally missed the typo - guess that could be it right there. I'll double check the image paths, thought I had those down though. Thanks again all, I hope to get better at this so at least I can avoid the obvious mistakes. I'll check it all this evening and report back.

  • #12
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for catching those things. Image with a capital "I" corrected. src corrected. I thought that would do it, but still no success. To keep things as simple as possible, I have put the script and the images back in the root directory. Now my javascript looks something like this:

    logo1=new Image(150,100)
    logo1.src="spl_01.gif"
    logo2=new Image(150,100)
    logo2.src="spl_02.gif"

    Do I need spaces in these lines, like before and after the equals?

    What else could I be missing?

  • #13
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone have any other thoughts on this one?

  • #14
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    The code is OK but you need some way of making the page wait until the images are all cached before it carries on loading. To be honest I am not sure how to do this. That way of caching images is usually used for rollovers - the images are loaded into cache in the background, and are ready (as long as the user isn't too eager to navigate around the site) for when the mouse rolls over the link.

    But the script doesn't pause the execution of the page, which is what you want.

    Maybe you could make a hidden layer in the HTML, above the visible code, which calls all the images. Then they'll be in the cache when they are called further down, on your actual page.

  • #15
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh! I didn't realize that, this is making more sense to me now. I thought the images werent' loading, but it sounds like they are, it's just that the table is loading too quickly.

    Crazy question, but let me ask this - is there a way to make a page with a link that automatically acitvates? In other words, if I made a new index page that only contained a black background, the script to pre-load the images, and a link (say something like "loading..."), is it possible to have that link automatically engage once the image load is complete and take you to the true splash page? Probably not an elegant solution, but could that work?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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