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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript image object

    Ok, this is a long shot but I hope someone can help me. I'm receiving a javascript error on IE, but not on firefox and the line number returned on ie is just the declaration for javascript so I don't know whats wrong. The thing that makes this even more confusing is that the error only happens when the image is stored in the cache. When you ctrl+refresh bypassing the cache, the image and function loads fine, but when you load the image from the cache, the function goofs up and ie returns an error "object required"

    Can someone take a look at this and tell me if you see something wrong.
    see script in action here
    Code:
    <script type="text/javascript">
    var x = new Image;
    x.src = 'foobar.jpg';
    
    loading = setTimeout("scaleImg()", 200);
    var saveWidth = 0;
    
    function scaleImg() 
    {
    	if (x.complete) {
    		what = document.getElementById('thepic');
    		if (winW = screen.width) {
    			if (what.width>(winW-100) || saveWidth>(winW-100)) {
    				if (what.width == (winW-100)) {
    					what.width = saveWidth;
    				}
    				else {
    					saveWidth = what.width;
    					what.width = (winW-100);
    				}
    			}
    		}
    		clearTimeout(loading);
    	}
    	else {
    		loading = setTimeout("scaleImg()", 200);
    	}
    }		
    </script>
    What I'm doing here is using the image object to determine when the image is complete, and when its complete I have it resize to a suitable width for the clients screen size. It works fine on both ie and mozilla when the image is not in the cache which is ok, but my main riority is getting rid of that error that I get on ie when I refresh the document.
    Last edited by section31; 07-14-2005 at 03:59 PM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Last edited by Willy Duitt; 07-14-2005 at 04:05 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, i was able to figure out the problem, in case anyone wants to know.

    The reason it would do it sometimes and not all the time was because I obviously didn't wait until the entire page loads before I start manipulating these objects. Here is my revision and it now works perfectly. I made several revisions but the main thing I had to use was the global event handler window.onload to load the function only after the entire page has been loading.


    Code:
    <script type="text/javascript">
    	var x = new Image;
    	x.src = 'foobar.jpg';
    
    	var saveWidth = 0;
    	var loading;
    	function go() {
    		loading = setInterval("scaleImg()", 200);
    	}
    
    	function scaleImg() 
    	{
    		if (x.complete) {
    			what = document.getElementById('thepic');
    			winW = screen.width;
    			if (what.width>(winW-100) || saveWidth>(winW-100)) {
    				if (what.width == (winW-100)) {
    					what.width = saveWidth;
    				}
    				else {
    					saveWidth = what.width;
    					what.width = (winW-100);
    				}
    			}
    			clearInterval(loading);
    		}
    	}		
    </script>
    What I plan on doing is looking for a javascript book, because I don't have a full grasp of it. For instance, I have no idea how the variable scopes work in js. I still don't understand why js is able to access vars from inside the function even though they aren't global.
    Last edited by section31; 07-15-2005 at 07:02 AM.

  • #4
    New Coder
    Join Date
    Oct 2002
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    When I tried that, IE worked OK but Netscape was always complete even when not.

    I tried dozens of ways to find out when the image load was finished but couldn't get it to work in Netscape.

    What I ended up doing was to load a "Not ready yet" image into the document image so they saw that if it hadn't downloaded.


  •  

    Posting Permissions

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