Results 1 to 6 of 6

Thread: javascript is not working with ie 7

  1. #1
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post javascript is not working with ie 7

    1) Script Title:Preload Image (with progress bar) Script

    2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...eloadimage.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


    Code:
    <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>
    Last edited by djr33; 01-30-2008 at 09:15 AM. Reason: Use [CODE] Blocks!!!!

  2. #2
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default my test site address for the above problem

    http://rz2games.com/new/

    and the site preload code is as below


    Code:
    <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>
    Last edited by djr33; 01-30-2008 at 09:15 AM. Reason: [CODE] Please!

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    The following section in your code is creating the problem:

    Code:
    	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
    Last edited by codeexploiter; 01-30-2008 at 08:53 AM. Reason: corrections

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    More important to the preload script itself is that:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    More important to the preload script itself is that:

    Code:
    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That code:

    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.
    Last edited by jscheuer1; 01-30-2008 at 10:54 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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