jquery - Edit image 'src' vs replace 'img' tag in a Div? -

    var rightnow=0; var highone=8; $(document).ready(function(){   $("#next-img").click(function(){     rightnow=rightnow+1; if (rightnow>highone) {rightnow=1;};      $(".img-class").attr('src',"http://example.com/images/abc_"+rightnow+".jpg");     starttime = new date().gettime();   }); });  function doneloading() {     var loadtime1 = new date().gettime() - starttime;     $("#stats span").html(loadtime1);  <img class="img-class" height="300" src="" onload="doneloading()"/> 

i using code display image on screen. each time 'next' button clicked, changes 'src' of img tag display next image. div containing image never goes empty. doneloading() function helps me calculate time of image load. previous image stays on screen till next image loads(the window not go blank). looking add these features:

1) when 'next' clicked, fade or remove present image while next image loads.

2) display loading indicator while next image loads.

3) continue display image load time.

my question:

should try build on present method or should use like:

    $("#next-img").click(function() {       $("#imagebox").html("<img src=' + this.href + '>"); }); 

or this...

    $("#next-img").click(function() {       $("#imagebox").html($("<img>").attr("src", this.href)); }); 

if can highlight advantage of 1 method on other, great. me seems .load , .html methods may should looking expert opinion.

the difference negligible, update src property:

$(".img-class").prop('src', 'http://example.org/...'); 

the alternative create tag this:

var $img = $('<img>', {     src: this.href }); $("#imagebox").html($img);