How to check image is loaded completely or not using JavaScript in Facebook

Question

Hi! I m trying to execute some code when image is not loaded. I m using following code:

<script language="javascript">

object = new Image();
object.src = '$imageurl';

if(!object.complete)
{
    //do something
}

</script>

But this is not working in Facebook. Please help me.

Answer 1

Use the onload event which fires when image has been loaded like this:

object.onload = function(){
  // image has been loaded
};

Also have a look at:

• Getting an Image's onload to Fire

Update:

To run code unless image has not been loaded, you could do this way:

<script language="javascript">

object = new Image();

// here image is not loaded yet

object.onload = function(){
  // image has been loaded
};

// image loaded, show it
object.src = '$imageurl';

</script>

I suspect you are using php by seeing $imageurl, you need to replace the line:

object.src = '$imageurl';

With:

object.src = '<?php echo $imageurl;?>';

Answer 2

You can use the onLoad event

<script language="javascript">

object = new Image();
object.src = '$imageurl';

object.onLoad = imageHasLoaded();

</script>

Answer 3

Run a function using window.setInterval while the image is loading and stop it as soon as it has loaded.

function () {
var img = new Image();

var intervalId = window.setInterval(function () {
  /* stuff to do with "img" while it is loading */
}, 250);

img.onload = function () { window.clearInterval(intervalId); }
img.src = 'http://example.com/image.jpg';
}