Strange JQuery image fadein/fadeout behaviour

Question

I have this html:

<div class='rightTile' >
    <img class='bigFace' src='content/images/teamSlide/zdjecie-Basia.png'>
</div>

and I use this jQuery code to fadeout/fadein images:

$('.someElement').on('click', function(){
    $('.bigFace').fadeOut('fast', function(){
        $('.bigFace').attr('src', anotherPicPath).fadeIn();
    }); 
});

I have many elements with 'someElement' class and in data-src attribue they have different images sources. The problem is, that when I first click on particular element with class someElement:

current bigFace image fadesOut
than fadesIn (with the same source)
and than image changes for the one with new src

When I click on that same element again, ex. for the second time, it works perfectly:

current bigFace image fadesOut,
than img with swapped source fadesIn.

I thought it may be something related with images preloading so I preload them with CSS, but it gives me nothing. As a forceful, test method I even triggered click on every .someElement element, but it still gives no effects.

It only happens when I upload code to external server (production lets say). On localhost - everything s fine.

I dont know why s that. Please help:) Greetings!

you can check out this question: [link](http://stackoverflow.com/questions/9959926/smooth-image-fade-out-change-src-and-fade-in-with-jquery) , it helps you check when the image is loaded, then fade in the new image.. — Bla..., Jun 26 '14 at 10:10
Here is the fiddle: http://jsfiddle.net/e5st4/17/ It s bit simpler than the real code, cause I change attributes of more alements than just img when clicking on image changer. But in JSFiddle it works as it should, unlike my code on server... — azrahel, Jun 26 '14 at 10:18
@user3003216 Can you post that comment as an answer? It helped me:) THANKS A TON! — azrahel, Jun 26 '14 at 10:30

score 0 · Answer 1 · answered Jun 26 '14 at 10:19

The browser needs to load the image data, which happens as soon as it is shown. to preload the image, you have to initialize it before showing it:

$('.someElement').on('click', function(){
    var image= new Image();
    $(image).load(function () {
        $('.bigFace').fadeOut('fast', function(){
        $('.bigFace').attr('src', image.src).fadeIn();
    }); 
    image.src = anotherPicPath;
});

this way, the image is first loaded, then exchanged. note that between the click and the image swap may be some seconds...

your fiddle: http://jsfiddle.net/e5st4/18/

score 0 · Answer 2 · edited May 23 '17 at 10:32

You can check out this question: smooth-image-fade-out-change-src-and-fade-in-with-jquery , it helps you check when the image is loaded, then fade in the new image, like below code:

$('.click').click(function() {
   $('img.class').fadeOut(300, function(){
      $(this).attr('src','new_src.png').bind('onreadystatechange load', function(){
         if (this.complete) $(this).fadeIn(300);
      });
   });
});

Strange JQuery image fadein/fadeout behaviour

2 Answers2