bluebomber Posted February 8, 2011 Share Posted February 8, 2011 I've read a few times that the safest cross-browser way to check to see if an image has loaded before doing anything else is to check to see if the image has dimensions that are greater than 0, I am however having some trouble getting this to work.After an image src is changed in javascript I am calling this function:function loadcheck(){ if (document.images['cycler'].width > 0){ cyclerfadein(); } else{ setTimeout("loadcheck()",20); }}which is supposed to loop indefinitely until the image in question reports a positive width at which point it calls a new function that safely does stuff to that image, however this doesn't seem to work - even if the image hasn't loaded yet, the fadein function seems to get called straight away.Can anyone point out what I'm doing wrong here? Link to comment Share on other sites More sharing options...
thescientist Posted February 8, 2011 Share Posted February 8, 2011 have you checked to see what the value of document.images['cycler'].width is? Perhaps some CSS is already defining the width/height. Link to comment Share on other sites More sharing options...
ShadowMage Posted February 8, 2011 Share Posted February 8, 2011 try using the image's onload event instead. Link to comment Share on other sites More sharing options...
bluebomber Posted February 8, 2011 Author Share Posted February 8, 2011 thescientist, there is no reference to the image in CSS and its HTML tag does not include its height or width property.This will no doubt be a stupid question, but whats the easiest way to test what the value of its width is at any given time?ShadowMage, I've had a quick look at using the onload event but I've read there are potential issues with this on certain browsers due to stored items in cache.Essentially, I have a simple gallery where a central image is swapped in and out (with a fade) when the user clicks on a variety of thumbnails, the problem I have is that even with image preloading, its possible for the user to choose a thumbnail belonging to an image that simply isn't ready yet and the fader will be activated anyway - the end result is you'll see the current image fade out, then incorrectly fade back in again only for it to "pop" moments later to the correct image which has now been loaded. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 8, 2011 Share Posted February 8, 2011 Is it a Javascript gallery? Is the gallery code setting the size of the image element? Link to comment Share on other sites More sharing options...
bluebomber Posted February 8, 2011 Author Share Posted February 8, 2011 Yes its a javascript gallery.Ok - I've uploaded a very quick and dirty test here:http://www.alkchan.com/width/livewidthtest.htmlWhen the page loads - you can see 2 span elements, one reports the width of the image, the other reports whether it has loaded or not - as you can see this is actually working fine when the page first loads.I've added a button that changes the src of the image into something different, but the span elements no longer update correctly for the second image that loads.any ideas? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2011 Share Posted February 8, 2011 you do realise that IE, replace broken image links, with their own broken image link icon, to indicate this. So it won't show 0, in this case. Link to comment Share on other sites More sharing options...
bluebomber Posted February 8, 2011 Author Share Posted February 8, 2011 dsonesuk, I do realise this - but ultimately this is a separate problem to solve, which I'm not too worried about.Right now, I can't accurately get javascript to determine when a single image (with changing src) does and does not have a width of > 0. Link to comment Share on other sites More sharing options...
bluebomber Posted February 8, 2011 Author Share Posted February 8, 2011 Ok, on investigating further I think I realise what my problem is.It looks as if testing to see if an image's width is greater than 0 only works the first time it is loaded.Any follow up images which are loaded are being handled by a change of src, so the width from the previous image is already inherited and as such is already greater than 0. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 9, 2011 Share Posted February 9, 2011 try this, just adjust image refernce in array <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var imagearray= new Array("../images/alien/1cha_imgash.jpg", "../images/alien/1cha_imgbrett_thumbxx.gif", "../images/alien/1cha_imgdallas.jpg", "../images/nav_buttons.png");pic=0;imagesfound = "";window.onload=function(){imagesfound = document.getElementsByTagName("img");imagesfound[0].src= imagearray[pic];check();loaded();}function check(){ document.getElementById('w').innerHTML = imagesfound[0].width; setTimeout("check()",120);}function loaded(){ if(imagesfound[0].width > 0){ document.getElementById('l').innerHTML = "loaded!"; }else{ var p = setTimeout("loaded()",120); } } function next(){ document.getElementById('prev').style.color="blue"; pic++; if(pic>=imagearray.length-1) { pic=imagearray.length-1; document.getElementById('next').style.color="#cccccc"; } else { document.getElementById('next').style.color="blue"; } imagesfound[0].src= imagearray[pic];document.getElementById('l').innerHTML = "waiting"; document.getElementById('w').innerHTML = imagesfound[0].width;var p = setTimeout("loaded()",120); } function prev(){ document.getElementById('next').style.color="blue"; pic--; if(pic<=0) { pic=0; document.getElementById('prev').style.color="#cccccc"; } else { document.getElementById('prev').style.color="blue"; } imagesfound[0].src= imagearray[pic]; document.getElementById('l').innerHTML = "waiting"; document.getElementById('w').innerHTML = imagesfound[0].width;var p = setTimeout("loaded()",120);}/*--*//*]]>*/</script><style type="text/css"></style></head><body><span id="w">width</span><br /><span id="l">not loaded</span><br /><img src="" /><br /><a href="java script:void(null)" id="next" onclick="next();">next</a><br /><a href="java script:void(null);" onclick="prev();" id="prev">prev</a></body></html> Link to comment Share on other sites More sharing options...
bluebomber Posted February 9, 2011 Author Share Posted February 9, 2011 Thanks for the reply.. but ouch - that code is a bit too advanced for me - I'd like to try and understand everything before I use it. Link to comment Share on other sites More sharing options...
bluebomber Posted February 9, 2011 Author Share Posted February 9, 2011 Ok - after thinking about this some more, I've decided on a new approach.. which almost works.. but frustratingly not quite...http://www.alkchan.com/width/index.htmI've got 5 different images on the page that load, the five zero's at the top of the page are the results of an array of numbers which all begin at 0 - the javascript ties the loading of each image to each entry in the array and turns the relevant zero into a one when the image has loaded (when its width is detected to be more than 0).The problem I'm now having, is that while the numbers do eventually all change to 1 when the images are loaded, strangely they will always switch to 1 in unison once ALL of the images are loaded, but what I'm trying to achieve here is to have the variables progressively switch from zeros to one as the page and individual images are loading up into memory.Any ideas why the array variables all read zero (even when some of the images have loaded) only for them all to switch to 1 at the end? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.