Check image is loaded when source set by js?

Question

How could i check that image is loaded when i am set image source from jquery. i want change image on mouse over and due large image size its taking time to loading so want to show loading image until it loads.

Here is my code snippet:

timer = setInterval(function() {
selector.attr('src',  'localhost/product/image1.jpg');

image1 is 436x436 and its taking time to load i want to show loading image before loading this image

Please help me...

possible duplicate of [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) — Praveen, Feb 06 '15 at 05:08
@praveen but i didnot found my answer on that case...and that is different from my problem.Thanks — SINGH, Feb 06 '15 at 05:33
I don't find any difference between the answer that you have marked and the [answer](http://stackoverflow.com/a/17960014/1671639) in the above duplicate question. — Praveen, Feb 06 '15 at 09:18

score 3 · Accepted Answer · answered Feb 06 '15 at 05:08

3

use below code

 selector.attr('src',  'localhost/product/image1.jpg');
 //show loader code here 
 var loadImage = new Image();
 loadImage.src = selector.attr('src');
  loadImage.onload = function(){
    // hide loader code here
 }

answered Feb 06 '15 at 05:08

Nishit Maheta

6,021
3
17
32

score 0 · Answer 2 · answered Feb 06 '15 at 05:11

//show image on mouseenter event
img.addEventListener('mouseenter',function(){
    this.setAttribute('src',  'localhost/product/image1.jpg');
    //show loading image here
});
img.addEventListener('load',function(){
    //Image loaded. So remove loading image here.
});

score 0 · Answer 3 · answered Feb 06 '15 at 05:13

0

you can use below function to get load callback for image :

$("#idOfImage").load(function() { /* image loaded */})
               .error(function() { /* error in loading */ });

answered Feb 06 '15 at 05:13

Dipali Vasani

2,526
2
16
30

score 0 · Answer 4 · answered Feb 06 '15 at 05:22

Here's what I did on my site brother and it loads perfectly.

HTML

<a href="#" full="http://www.sample.com/wp-content/uploads/2015/01/plot3picture.jpg">
    <img src="http://www.sample.com/wp-content/uploads/2015/01/plot3picture-150x150.jpg" alt="" />                
</a>

JS

$( window ).bind( 'load', function(){
    setTimeout( function(){ 
        $( 'body a' ).each( function(){
            $( this ).find( 'img' ).attr( 'src', $( this ).attr( 'full' ) ); 
        }); 
    }, 300 );
});

score 0 · Answer 5 · answered Feb 06 '15 at 05:23

0

Load two images on page load.place it in header

Try this:

if (document.images) {
    img1 = new Image();
    img1.src = "imgpath/image1.png";
    img2 = new Image();
    img2.src = "imgpath/image2.png"";
}

answered Feb 06 '15 at 05:23

Pioter

465
3
8
21

Check image is loaded when source set by js?

5 Answers5