jQuery Image Swap Not Showing Immediately

Question

I'm using the jQuery code below to replace part of the image src. Basically it converts example.com/200x200/sample.jpg into example.com/500x500/sample.jpg.

It works fine only problem is it renders the old image first before showing the new one. Is it possible to load the swapped image first to improve user experience?

$(document).ready(function() {
    $(".gallery img").each(function() {
        $(this).attr("src", function(a, b) {
            return b.replace("200x200", "500x500")
        })
    })
});

JSFiddle Demo (Click "Run" multiple times)

possible duplicate of [Programmatically change the src of an img tag](http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) — Brian, Jul 23 '15 at 01:21
your fiddle works fine for me, [look](http://jsfiddle.net/w9wq4rnd/) — dippas, Jul 23 '15 at 01:55
the OP is able to change the image URL, the problem is that the paging is loading the original image (200x200) and **then** loading 500x500 image. — Neverever, Jul 23 '15 at 02:01
@dippas Yes the code does work, but if you try to press 'Run' several times. You will notice that the old image shows first before the new one. I was wondering if it's possible to load the new image first for better user experience. — Vianne, Jul 23 '15 at 02:01
I was aware of that, probably because my internet speed is fast i don't see the old image loading first, not even hit the "run" several times in a row — dippas, Jul 23 '15 at 02:03
@VianneYuZhèng Check out my answer and see if it solves your problem — Vignesh Subramanian, Jul 23 '15 at 03:55

score 0 · Answer 1 · answered Jul 23 '15 at 02:27

Put the image in fixed position div that has overflow hidden and height and width of 0. This will cause the image to load but not display. Here is a fiddle showing the basic idea: https://jsfiddle.net/0tm3kb6e/. This image displays after 10 seconds. Use chrome to throttle the network and you will see that it is loaded by the time it is displayed. Here is the code I used. You just need the html and css

html

<div id="image-hider">
  <img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>

css

#image-hider {
  height:0;
  width: 0;
  overflow: hidden;
  position: fixed;
}

javascript

$(document).ready(function() {
  setTimeout(function() {
    $('#image-hider').css('height','500px');
    $('#image-hider').css('width','500px');
  }, 10000);
});

score 0 · Answer 2 · answered Jul 23 '15 at 03:52

Try using a overlay div

<div class="gallery">
    <img src="//lorempixel.com/200/200" />
    <div class="overlaydiv"> </div>
</div>

Hide it after a second(giving some time for image to load)

 $(".gallery img").each(function () {
     $(this).attr("src",$(this).attr("src").replace("200/200", "400/400"));
     setTimeout(function(){            
     $(".overlaydiv").hide();
     },1000);
 });

Check out this fiddle

jQuery Image Swap Not Showing Immediately

2 Answers2