www.webdeveloper.com
Results 1 to 8 of 8

Thread: Pre-load images.

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,390

    Question Pre-load images.

    What is the easiest method to 'pre-load' images using JS?

    I have seen this term bandied about,
    but I'm not sure how it differs from just loading images
    or how might be done.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    I've never done it, myself. But I did Google the following article, which seems pretty informative.
    http://perishablepress.com/3-ways-pr...vascript-ajax/
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    interesting read. he didn't actually use AJAX to preload any type of image though, so why did he include that as a method?

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,390

    Thumbs up

    Quote Originally Posted by WolfShade View Post
    I've never done it, myself. But I did Google the following article, which seems pretty informative.
    http://perishablepress.com/3-ways-pr...vascript-ajax/
    Thanks. I'll give them a try to see if the script acts any faster.

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Obviously images can be pre-loaded without JS using <img> with 0-width/height or css backgrounds, but in cases where the display of the pre-loaded images is script-dependent, then the preloading may as well be done by a script routine, ensuring that it's not done if script isn't supported.

    I'm sure you've seen countless examples using the Image() object. Don't make the classic error of applying multiple filenames to the same instance of an Image object, using a loop.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,390

    Question

    Well, I tried the first JS only example in the link 'Wolfshade' provided,
    but now I have more questions that before...
    Code:
    <div class="hidden">
    	<script type="text/javascript">
    		<!--//--><![CDATA[//><!--
    			var images = new Array()
    			function preload() {
    				for (i = 0; i < preload.arguments.length; i++) {
    					images[i] = new Image()
    					images[i].src = preload.arguments[i]
    				}
    			}
    			preload(
    				"http://domain.tld/gallery/image-001.jpg",
    				"http://domain.tld/gallery/image-002.jpg",
    				"http://domain.tld/gallery/image-003.jpg"
    			)
    		//--><!]]>
    	</script>
    </div>
    I changed the preload() array elements to valid images

    The problem seems to be that there are TWO objects named preload()!!!
    The first object is a function that should create the image elements.
    The second object is 'preload( files )' and appears to be an array of files to be displayed (changed to valid links).
    How can this be???

    I also added 3 <img...> elements in the <body> because nothing seemed to display, but that did nothing either.
    How would I reference the <img...> tags? Would I need to hard-code the <img> tags?
    Or could they be generated dynamically to match the number of elements of the 'images' array?

    Bottom line is that I think I don't understand what I'm doing at this point in time!

  7. #7
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by JMRKER View Post
    I changed the preload() array elements to valid images

    The problem seems to be that there are TWO objects named preload()!!!
    The first is a function, the second is a call to that function.
    I also added 3 <img...> elements in the <body> because nothing seemed to display, but that did nothing either.
    How would I reference the <img...> tags? Would I need to hard-code the <img> tags?
    This code isn't about displaying images, it's about having them downloaded and in memory, ready to be displayed when their filename is specified by a script.
    I thought you knew all this of old.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,390

    Arrow

    Quote Originally Posted by Logic Ali View Post
    The first is a function, the second is a call to that function.
    This code isn't about displaying images, it's about having them downloaded and in memory, ready to be displayed when their filename is specified by a script.
    I thought you knew all this of old.
    That was the concept problem I was talking about in the 1st post.
    I think it is beginning to gel.

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