• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2806
  • Last Modified:

How to check if an image has fully loaded

is there a way to check if an image has fully loaded ?

what I really want to do is time how long it takes

example
1. set a start time
2. load an image
3. set an end time
4. calulate difference between 3. and 1. to give me the time taken

there seems to be no accurate way I can find of doing this

any ideas

KD




 

0
kevindockerty
Asked:
kevindockerty
  • 9
  • 7
  • 5
  • +2
1 Solution
 
jessegivyDeveloperCommented:
Is this just for diagnostic or is this something you actually want built into the page?  If you're just wanting to test a perticular image then you could create a tiny page that just contains the img tag and use the onload event procedure to check like this:

<html>
<head>
<title>Image Load Time</title>
<script type="text/javascript">
var start=new Date();
function showTime()
{
   var loaded=new Date();
   alert((loaded.getMinutes()-start.getMinutes())+"Minutes"+(loaded.getSeconds()-start.getSeconds())+"Seconds");
}
</script>
</head>
<body onload="showTime()">
<img src="addressOfLargImg.jpg">
</body>
</html>

...I didn't test it but the thing should work.  Otherwise my only other thought would be to do something tricky with the setTimeout() function.

Cheers,

Jesse
0
 
rama_krishna580Commented:
Hi,

When an image is inserted as part of an html file the author has no (easy) control over the order in which the image is loaded. Normally the browser will start to load each image as soon as it encounters it in the html file, and there is no control over the order in which multiple images are loaded.

It is possible to control the load order of images using JavaScript, but it is not an easy task. The following example demonstrates how to load four images consecutively, one after the other, only loading the first image after the remainder of the html document has been loaded:

<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script language="JavaScript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;
  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>

http://www.cryer.co.uk/resources/javascript/script3.htm

R.K
0
 
rama_krishna580Commented:
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ahoffmannCommented:
// use the DOM, somthing like:

var preloadImage = new Image();
preloadImage.onload = function(){
  // do whatever you want while loading
}
preloadImage.src = 'path-to-image';
// assign preloadImage.src to your IMG tag's src attribute
0
 
enachemcCommented:
use the size to determine if it was loaded (if the size is correct, then it was loaded).
0
 
kevindockertyAuthor Commented:
thanks for the comments all
I accepted jesse ( post 1 ) as the neatest solution that worked best

I just changed the line.....

alert((loaded.getMinutes()-start.getMinutes())+"Minutes"+(loaded.getSeconds()-start.getSeconds())+"Seconds");

to read.......

alert((loaded.getTime()-start.getTime())+" Seconds.");

to give me milliseconds and also because it caused a problem when crossing over minutes

thanks all
KD
0
 
enachemcCommented:
that means that the body has loaded, not the image. The image can be still loading.
0
 
kevindockertyAuthor Commented:
But the only thing in the body is the image. It seems to work anyway.
0
 
enachemcCommented:
try using a big image and a slow connection. The body loads very fast because it only contains a few lines, but the images has yet to be loaded, because this will be another request.
0
 
kevindockertyAuthor Commented:
ok - so whats the alternative  ?
0
 
enachemcCommented:
one alternative would be to use the size of the image - when the image is not loaded, it would have size 0,1 or the size of the placeholder used by the browser. When the image is loaded, it's size will be determined correctly.
0
 
kevindockertyAuthor Commented:
how do I check this ?

could you give a quick example please
0
 
enachemcCommented:
<body>
<script language="javascript">
      function checkImg(){
            window.status="width=" + document.getElementById("theImg").width;
            window.setTimeout("checkImg()", 100);
      }
      window.setTimeout("checkImg()", 100);
</script>
<img src="a.jpg" id="theImg"/>
</body>

If the image is missing, on my computer, it will report a widht of 28 (the image has another width, but was not loaded). If the image is present, it will report the corect width. What you do after this ... is your choice.
0
 
kevindockertyAuthor Commented:
thats great - I'll give it a try
thanks a million
KD
0
 
ahoffmannCommented:
looks like a infinite loop ...
0
 
enachemcCommented:
that is what it is supposed to do .... this is how timers are set in JavaScript. You can break this by not performing the call once you do not need it any more.
0
 
kevindockertyAuthor Commented:
My plan is to do this

function checkImg(){
          window.status="width=" + document.getElementById("theImg").width;
// check here that I have hit my desired width ? if so break
          window.setTimeout("checkImg()", 100);
     }


Incidentially - is .width property the best thing to use ?
as images appear to load top to bottom, would height be better or not ?
0
 
enachemcCommented:
you can use both width and height for a better control
0
 
ahoffmannCommented:
... infinite loop ... that is what it is supposed to do ...
Nice joke :-D
hope your users know how to deal with crashing browsers when visiting your site ...
0
 
enachemcCommented:
damn ... your're good ...

provide please a JS code example of a function that gets called each 100 miliseconds.

And do you have any reason for why the browser would crash ? If you pay more attention, that not an "infinite loop", but a self perpetuable timer (that planifies itself).
0
 
ahoffmannCommented:
hmm, probably I miss something (please enlighten me), but where is the condition to stop the loop (or timer, if you prefer that)?
0
 
enachemcCommented:
the condition is not present, (though kevindockerty said that he will stop it when it is not necessary any more). The timer should run AS LONG AS it will not be stopped. This kind of timers (even timers that are NEVER stopped) are used very frequenlty in web pages (to show the current time for example). These timers do not stop as long as the page is loaded in the browser. But this is not an infinite loop. It will not cause the browser or other processes to run slow or crash, as it will get executed each 100ms (and the function will finish almost instantly). This means that at each 100ms the page will run the function for 10 nanoseconds (estimation).
0
 
kevindockertyAuthor Commented:
it works well enachemc - thanks again mate for the 'timer' idea.

I did manage to stop it hoffmann and without my browser crashing - honest !


0
 
ahoffmannCommented:
be happy if it works this way ;-)
nice discussion anyway
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 9
  • 7
  • 5
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now