Solved

How to check if an image has fully loaded

Posted on 2006-11-22
24
2,789 Views
Last Modified: 2012-06-27
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
Comment
Question by:kevindockerty
  • 9
  • 7
  • 5
  • +2
24 Comments
 
LVL 12

Accepted Solution

by:
jessegivy earned 250 total points
ID: 17997670
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
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 17998011
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
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 17998023
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 17998328
// 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
 
LVL 12

Expert Comment

by:enachemc
ID: 17998918
use the size to determine if it was loaded (if the size is correct, then it was loaded).
0
 
LVL 3

Author Comment

by:kevindockerty
ID: 17999907
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
 
LVL 12

Expert Comment

by:enachemc
ID: 18001348
that means that the body has loaded, not the image. The image can be still loading.
0
 
LVL 3

Author Comment

by:kevindockerty
ID: 18002124
But the only thing in the body is the image. It seems to work anyway.
0
 
LVL 12

Expert Comment

by:enachemc
ID: 18002622
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
 
LVL 3

Author Comment

by:kevindockerty
ID: 18002839
ok - so whats the alternative  ?
0
 
LVL 12

Expert Comment

by:enachemc
ID: 18002851
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
 
LVL 3

Author Comment

by:kevindockerty
ID: 18002977
how do I check this ?

could you give a quick example please
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 12

Expert Comment

by:enachemc
ID: 18003041
<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
 
LVL 3

Author Comment

by:kevindockerty
ID: 18003083
thats great - I'll give it a try
thanks a million
KD
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 18003367
looks like a infinite loop ...
0
 
LVL 12

Expert Comment

by:enachemc
ID: 18003398
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
 
LVL 3

Author Comment

by:kevindockerty
ID: 18003439
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
 
LVL 12

Expert Comment

by:enachemc
ID: 18003513
you can use both width and height for a better control
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 18003549
... 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
 
LVL 12

Expert Comment

by:enachemc
ID: 18003572
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
 
LVL 51

Expert Comment

by:ahoffmann
ID: 18003619
hmm, probably I miss something (please enlighten me), but where is the condition to stop the loop (or timer, if you prefer that)?
0
 
LVL 12

Expert Comment

by:enachemc
ID: 18003642
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
 
LVL 3

Author Comment

by:kevindockerty
ID: 18003897
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
 
LVL 51

Expert Comment

by:ahoffmann
ID: 18004343
be happy if it works this way ;-)
nice discussion anyway
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now