javascript - Change image with jQuery and see image getting loaded -

i dynamically changing images jquery using $('img').attr('src','newurl');

doing so, image displayed when entirely loaded.

my connection slow, image directly display , see getting progressively loaded, same way images “appear” when arrive on page on web (whether top bottom, or blurry sharp depending on compression algorithm of image).

i want javascript, jquery, or simpler alternative.

(i know how display progress bar, or "loading…" text while image loads, that's not i'm looking for)

here's fiddle if want update.

i've found way that, want. don't use attr("src",) jquery, remove , add hole img element html(), trigger browser load image source , browser displays image while loading (tested in chrome).

html:

<p><button>change image source</button></p> <div>     <img src="http://xxxxx"> </div> 

script:

var newimg = '<img src="http://yyyyyy">';  $('button').click(function(){     $('div').html(newimg); }); 

here updated fiddle: http://jsfiddle.net/jxwv52u7/1/ hope helps.