PDA

View Full Version : javascript is not working with ie 7



alexio
01-30-2008, 07:01 AM
1) Script Title:Preload Image (with progress bar) Script

2) Script URL (on DD):http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm

3) Describe problem: the script works in firefox well but hangs in ie 7
the procress bar does not go futher can u insert a time out function in this script pls

this is what i edited the script



<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
var locationAfterPreload = "http://localhost/new/index1.php" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("/images/blocks/blocks1/bottom.png","/images/blocks/blocks1/button_block.png","/images/blocks/blocks1/left.png","/images/blocks/blocks1/left_bottom.png","/images/blocks/blocks1/left_top.png","/images/blocks/blocks1/mid.png","/images/blocks/blocks1/right.png","/images/blocks/blocks1/right_bottom.png","/images/blocks/blocks1/right_top.png","/images/blocks/blocks1/top.png","/images/blocks/blocks2/bottom.png","/images/blocks/blocks2/button_block.png","/images/blocks/blocks2/left.png","/images/blocks/blocks2/left_bottom.png","/images/blocks/blocks2/left_top.png","/images/blocks/blocks2/mid.png","/images/blocks/blocks2/right.png","/images/blocks/blocks2/right_bottom.png","/images/blocks/blocks2/right_top.png","/images/blocks/blocks2/top.png","/images/homepage/movingstrip/1.png","/images/homepage/movingstrip/2.png","/images/homepage/movingstrip/3.png","/images/homepage/movingstrip/4.png","/images/homepage/movingstrip/5.png","/images/homepage/backgrounds/bgrepeat.png","/images/homepage/backgrounds/careers.png","/images/homepage/backgrounds/company.png","/images/homepage/backgrounds/bgrepeat.png","/images/homepage/backgrounds/contact.png","/images/homepage/backgrounds/games.png","/images/homepage/backgrounds/home.png","/images/homepage/buttons/home.png","/images/homepage/buttons/home_h.png","/images/homepage/buttons/game.png","/images/homepage/buttons/game_h.png","/images/homepage/buttons/careers.png","/images/homepage/buttons/careers_h.png","/images/homepage/buttons/company.png","/images/homepage/buttons/company_h.png","/images/homepage/buttons/contacts.png","/images/homepage/buttons/contacts_h.png")

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "./images/buttons/black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "./images/buttons/blue.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p align="center"><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> &nbsp; &nbsp;</small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

alexio
01-30-2008, 07:52 AM
http://rz2games.com/new/

and the site preload code is as below



<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
var locationAfterPreload = "http://rz2games.com/new/index1.php" // URL of the page after preload finishes
var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("http://rz2games.com/new/images/blocks/blocks1/bottom.png","http://rz2games.com/new/images/blocks/blocks1/button_block.png","http://rz2games.com/new/images/blocks/blocks1/left.png","http://rz2games.com/new/images/blocks/blocks1/left_bottom.png","http://rz2games.com/new/images/blocks/blocks1/left_top.png","http://rz2games.com/new/images/blocks/blocks1/mid.png","http://rz2games.com/new/images/blocks/blocks1/right.png","http://rz2games.com/new/images/blocks/blocks1/right_bottom.png","http://rz2games.com/new/images/blocks/blocks1/right_top.png","http://rz2games.com/new/images/blocks/blocks1/top.png","http://rz2games.com/new/images/blocks/blocks2/bottom.png","http://rz2games.com/new/images/blocks/blocks2/button_block.png","http://rz2games.com/new/images/blocks/blocks2/left.png","http://rz2games.com/new/images/blocks/blocks2/left_bottom.png","http://rz2games.com/new/images/blocks/blocks2/left_top.png","http://rz2games.com/new/images/blocks/blocks2/mid.png","http://rz2games.com/new/images/blocks/blocks2/right.png","http://rz2games.com/new/images/blocks/blocks2/right_bottom.png","http://rz2games.com/new/images/blocks/blocks2/right_top.png","http://rz2games.com/new/images/blocks/blocks2/top.png","http://rz2games.com/new/images/homepage/movingstrip/1.png","http://rz2games.com/new/images/homepage/movingstrip/2.png","http://rz2games.com/new/images/homepage/movingstrip/3.png","http://rz2games.com/new/images/homepage/movingstrip/4.png","http://rz2games.com/new/images/homepage/movingstrip/5.png","http://rz2games.com/new/images/homepage/backgrounds/bgrepeat.png","http://rz2games.com/new/images/homepage/backgrounds/careers.png","http://rz2games.com/new/images/homepage/backgrounds/company.png","http://rz2games.com/new/images/homepage/backgrounds/bgrepeat.png","http://rz2games.com/new/images/homepage/backgrounds/contact.png","http://rz2games.com/new/images/homepage/backgrounds/games.png","http://rz2games.com/new/images/homepage/backgrounds/home.png","http://rz2games.com/new/images/homepage/buttons/home.png","http://rz2games.com/new/images/homepage/buttons/home_h.png","http://rz2games.com/new/images/homepage/buttons/game.png","http://rz2games.com/new/images/homepage/buttons/game_h.png","http://rz2games.com/new/images/homepage/buttons/careers.png","http://rz2games.com/new/images/homepage/buttons/careers_h.png","http://rz2games.com/new/images/homepage/buttons/company.png","http://rz2games.com/new/images/homepage/buttons/company_h.png","http://rz2games.com/new/images/homepage/buttons/contacts.png","http://rz2games.com/new/images/homepage/buttons/contacts_h.png")

// Do not modify anything beyond this point!
if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "./images/buttons/black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
dots[1] = new Image(1,1)
dots[1].src = "./images/buttons/blue.gif" // color of bar as preloading progresses (same note as above)
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p align="center"><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a> &nbsp; &nbsp;</small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

codeexploiter
01-30-2008, 08:52 AM
The following section in your code is creating the problem:



function doTimeoutStuff() {
for( var i = 0; i < 5; i++ ) {
document.getElementBy('collapse'+i).style.display = 'none';
}
}
setTimeout(doTimeoutStuff,2000);


If you comment the setTimout function call then it works in IE7.

Errors Found

1. document.getElementBy() - there is no such function available in document object. Most probably it is document.getElementById() I think.

2. Even if you used the document.getElementById function correctly make sure that the element that you've got via this is true before applying something on it.

Hope this helps

jscheuer1
01-30-2008, 09:29 AM
More important to the preload script itself is that:


http://rz2games.com/new/images/homepage/buttons/contacts_h.png
http://rz2games.com/new/images/blocks/blocks2/button_block.png
http://rz2games.com/new/images/homepage/buttons/contacts.png

have errors - 404 not found. They are probably just missing. Other browsers will skip these after trying them once and finding them missing, IE will choke. Make sure all the images listed in your 'yourImages' array are on the server in the location designated in the script code.

codeexploiter
01-30-2008, 09:31 AM
More important to the preload script itself is that:


http://rz2games.com/new/images/homepage/buttons/contacts_h.png
http://rz2games.com/new/images/blocks/blocks2/button_block.png
http://rz2games.com/new/images/homepage/buttons/contacts.png

have errors - 404 not found. They are probably just missing. Other browsers will skip these after trying them once and finding them missing, IE will choke. Make sure all the images listed in your 'yourImages' array are on the server in the location designated in the script code.

Yes I've checked that using Fiddler and some items are missing but from my saved local copy once I commented the timed out function then it redirected to his site without any trouble.

jscheuer1
01-30-2008, 10:47 AM
That code:



function doTimeoutStuff() {
for( var i = 0; i < 5; i++ ) {
document.getElementBy('collapse'+i).style.display = 'none';
}
}
setTimeout(doTimeoutStuff,2000);

isn't in alexio's posts or in the source of alexio's pages or scripts associated with alexio's pages. It also isn't in the original preload script. So I really don't know what you are talking about. It might have been in one of those places earlier though, I suppose.

However, it is a known issue with this preload script that IE will choke on missing images. Perhaps only v 6, but I don't think that has changed in v 7. In any case, it is a very good idea to fix the problem either by removing the missing images from the array or by uploading them to the server in the correct locations.