Load Image from javascript

Question

On my album slide show page  i have code like   lt span style  display none   gt      lt img id  id1  src    imageUrl   onload  javascript showImage     gt   lt  span gt    lt span gt         show loader   lt  span gt    in showImage    i  am sure the image  is loaded  so i show the image and hide the loader   Now when user clicks on next  i need to change the src of the image  Now i need don t know how to set src only when image is loaded

User · Answer

You can try this     lt img id  id1  src  url to file png  onload  showImage    gt   function showImage          id1   attr  src    new file link png        Also  try to remove the    that is just the operator  that is needed for Server-Side  for example ASP NET  you don t need it in JS   This way  you can change the attribute for the image   Here is the fiddle  http   jsfiddle net afzaal ahmad zeeshan 8H4MC

User · Answer

Sorry guys    You can t rely on the image load event to fire but you can kind of rely on it in some situations and fallback to a maximum load time allowed  In this case  10 seconds  I wrote this and it lives on production code for when people want to link images on a form post   function loadImg options  callback      var seconds   0    maxSeconds   10    complete   false    done   false     if  options maxSeconds        maxSeconds   options maxSeconds         function tryImage         if  done    return        if  seconds  gt   maxSeconds          callback   err   timeout            done   true        return            if  complete  amp  amp  img complete          if  img width  amp  amp  img height            callback   img  img             done   true          return                callback   err   404            done   true        return        else if  img complete          complete   true            seconds        callback tryImage   setTimeout tryImage  1000         var img   new Image      img onload   tryImage      img src   options src    tryImage        use like so   loadImage   src    http   somewebsite com image png   maxSeconds   10    function status      if status err           handle error     return           you got the img within status img        Try it on JSFiddle net  http   jsfiddle net 2Cgyg 6

User · Answer

Use a new image object each time you want to load a picture    var image   new Image    image onload   function          document getElementById  id1   setAttribute  src   this src      image src    http   path to image

User · Answer

lt span gt       lt img id  my image  src       gt   lt  span gt    lt span class  spanloader  gt        lt span gt set Loading Image Image lt  span gt     lt  span gt    lt input type  button  id  btnnext  value  Next    gt     lt script type  text javascript  gt           btnnext   click function                  spanloader   hide                my image   attr  src    1 jpg              lt  script gt

User · Answer

this worked for me though    i wanted to display the image after the pencil icon  is being clicked    and i wanted it seamless   and this was my approach       i created an input file  element and made it hidden     lt input type  file  id  upl  style  display none   gt    this input-file s click event will be trigged by the getImage function    lt a href  javascript    onclick  getImage     gt       lt img src   assets pen png   gt   lt  a gt    lt script gt       function getImage               upl   click            lt  script gt    this is done while listening to the change event of the input-file element with ID of  upl    x000D   x000D       document  ready function    x000D        x000D             upl   bind  change   function evt   x000D            x000D      var preview       logodiv   find  img    x000D      var file      evt target files 0   x000D      var reader    new FileReader    x000D     x000D      reader onloadend   function      x000D         logodiv  gt  img   x000D       prop  src  reader result     set the scr prop  x000D       prop  width   216      set the width of the image x000D       prop  height  200      set the height of the image x000D        x000D     x000D      if  file    x000D     reader readAsDataURL file   x000D        else   x000D     preview src       x000D        x000D     x000D          x000D   x000D        x000D   x000D   x000D    and BOOM    - it WORKS

User · Answer

you can just append another hidden img element and swap them in onload event   Or use single image element and use javascript like   var  img   document getElementById  id1    var newImg   new Image  newImg onload   function          img src   this src    newImg src    http   whatever     this code should preload the image and show it when it s ready

User · Answer

Try this You have some symbols in  imageUrl   lt img id  id1  src   imageUrl  onload  javascript showImage     gt

User · Answer

just click on image and will change    x000D   x000D   lt div gt  x000D    lt img src  https   i imgur com jgyJ7Oj png  id  imgLoad  gt  x000D   lt  div gt  x000D   x000D   lt script type  text javascript  gt  x000D   var img   document getElementById  imgLoad     x000D   img onclick   function     img src    https   i imgur com PqpOLwp png     x000D    lt  script gt  x000D   x000D   x000D

User · Answer

See this tutorial  Loading images with native JavaScript and handling of events for showing loading spinners  It tells you how to load images with native JavaScript and how to handle events for showing loading spinners  Basically  you create a new Image    and handle the event correctly then  That should work in all browsers  even in IE7  maybe even below IE7  but I did not test that

User · Answer

Simplest load image from JS to DOM-element   element innerHTML      lt img src  image jpg  gt  lt  img gt      With onload event   element innerHTML      lt img src  image jpg  onload  javascript showImage     gt  lt  img gt

User · Answer

If you are loading the image via AJAX you could use a callback to check if the image is loaded and do the hiding and src attribute assigning   Something like this      ajax      url   image source     success  function          Do the hiding here and the attribute setting           For more reading refer to this JQuery AJAX

[javascript] Load Image from javascript

Examples related to javascript

Examples related to jquery