homepage Welcome to WebmasterWorld Guest from 54.197.110.151
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Having trouble getting images preloaded
Doesn't appear to work in FF or IE
dpinion

5+ Year Member



 
Msg#: 3599625 posted 3:54 pm on Mar 13, 2008 (gmt 0)

First my code:

var imgS = new Array();
imgS[0] = "img/tsassemble.jpg";
imgS[1] = "img/ia_images.jpg";
imgS[2] = "img/mil_images.jpg";
imgS[3] = "img/med_images.jpg";
imgS[4] = "img/svr_images.jpg";

var downloadCountdown = 200;
function PreloadImages() {
var preloadedImage = new Image()
for (var j = 0; j < imgS.length; j++) {
preloadedImage.onload = downloadCount;
preloadedImage.src = imgS[j];

}
}

function downloadCount() {
//if(--downloadCountdown==0)
alert(imgS.length)
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//END

Go easy on me, I am new, and using Dreamweaver as a crutch.. :)

Now I placed the downloadCount function in an attempt to "see" if the images are being loaded. Basically my thinking is that if it is trying to preload the images, I should get a message box for each of them. What happens is the page loads, I get an alert with the correct array length (5). I see 2 alerts and then nothing. I expected to see 5 alerts, one for each image.

After the page loads, if I rollover the links that trigger the mm_swapimage function then it appears to have to load the image in question. Once I do this once then they seem to be loaded.

Any ideas or suggestions on how to proceed would be greatly appreciated!

 

MarkFilipak

5+ Year Member



 
Msg#: 3599625 posted 2:20 am on Mar 14, 2008 (gmt 0)

This will get you started:
<head>...
if (this.Image) var imgS = [
new Image("img/tsassemble.jpg"),
new Image("img/ia_images.jpg"),
new Image("img/mil_images.jpg"),
new Image("img/med_images.jpg"),
new Image("img/svr_images.jpg")
];

This prefetches and caches the images if the browser supports the Image constructor. If the browser doesn't support the Image constructor, there's nothing you can do. In either case, you don't reference imgS further. The images are in cache (even if just for the session) and you reference them by URL as you would do if they weren't cached.

dpinion

5+ Year Member



 
Msg#: 3599625 posted 12:19 pm on Mar 14, 2008 (gmt 0)

Thanks for that. I seem to be getting an error on the first line though. Here is what I have (in the head section, the rest of the javascript is in an external file)


<script language="javascript" type="text/javascript">
if (this.Image) var imgS = [
new Image("img/tsassemble.jpg"),
new Image("img/ia_images.jpg"),
new Image("img/mil_images.jpg"),
new Image("img/med_images.jpg"),
new Image("img/svr_images.jpg")
];
</script>

MarkFilipak

5+ Year Member



 
Msg#: 3599625 posted 11:36 pm on Mar 14, 2008 (gmt 0)

Try this:
<script type="text/javascript"><!--
if (this.Image) var imgS = [
new Image("img/tsassemble.jpg"),
new Image("img/ia_images.jpg"),
new Image("img/mil_images.jpg"),
new Image("img/med_images.jpg"),
new Image("img/svr_images.jpg")
];
//-->
</script>

Achernar

5+ Year Member



 
Msg#: 3599625 posted 11:45 pm on Mar 14, 2008 (gmt 0)

Try document.Image instead of this.Image

MarkFilipak

5+ Year Member



 
Msg#: 3599625 posted 12:31 am on Mar 15, 2008 (gmt 0)

> Try document.Image...

The Image constructor is global, not a property of document.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3599625 posted 6:28 am on Mar 15, 2008 (gmt 0)

var imgS = new Array(
...
);

... should work.

[edited by: DrDoc at 6:28 am (utc) on Mar. 15, 2008]

MarkFilipak

5+ Year Member



 
Msg#: 3599625 posted 12:08 am on Mar 16, 2008 (gmt 0)

dpinion, are you still there?

> I am new
New to javascript? New to HTML? I will assume both.

> I seem to be getting an error on the first line though
Is this your first line?
<script language="javascript" type="text/javascript">

That line is HTML. It cannot be inside your script-element.

MarkFilipak

5+ Year Member



 
Msg#: 3599625 posted 6:20 am on Mar 16, 2008 (gmt 0)

> It cannot be inside your script-element.
Jeez. What was I thinking? That line IS the script-element. (Time to get some sleep.)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved