Load image with jQuery and append it to the DOM

Question

I m trying to load an image from a given link   var imgPath     imgLink  attr  href     and append it to the page  so I can insert it into a given element for an image viewer   Even though I searched Stackoverflow and the jQuery docs without end  I can t figure it out   After I load the image  I want to set different values to it  like width  height  etc   Update   This is what I got  The problem I m having is that I can t run jQuery functions on the img element   function imagePostition imgLink        Load the image we want to display from the given  lt a gt  link           Load the image path form the link var imgPath     imgLink  attr  href        Add image to html     lt img src     imgPath     class  original  gt    load function            imgLink  append this        var img   this          Resize the image to the window width        http   stackoverflow com questions 1143517 jquery-resizing-image      var maxWidth     window  width             window width     var maxHeight     window  height           window height     var imgWidth   img width                   image width     var imgHeight   img height                 image height     var ratio   0                              resize ration     var topPosition   0                        top image position     var leftPostition   0                      left image postiton         calculate image dimension      if  imgWidth  gt  maxWidth            ratio   imgHeight   imgWidth          imgWidth   maxWidth          imgHeight    maxWidth   ratio             else if  imgHeight  gt  maxHeight            ratio   imgWidth   imgHeight          imgWidth    maxHeight   ratio           imgHeight   maxHeight                calculate image position         check if the window is larger than the image        y position     if maxHeight  gt  imgHeight            topPosition    maxHeight   2  -  imgHeight   2                x position     if maxWidth  gt  imgWidth            leftPostition    maxWidth   2  -  imgWidth   2                imgLink  append img           Set absolute image position     img css  top   topPosition       img css  left   leftPostition           Set image width and height     img attr  width   imgWidth       img attr  height   imgHeight             Add backdrop        body   prepend   lt div id  backdrop  gt  lt  div gt             Set backdrop size         backdrop   css  width   maxWidth           backdrop   css  height   maxHeight           reveal image     img animate  opacity  1   100      img show

User · Answer

var img   new Image       img  load function           container   append   this        attr      src  someRemoteImage     error function        do something if image cannot load

User · Answer

Here is the code I use when I want to preload images before appending them to the page   It is also important to check if the image is already loaded from the cache  for IE          create image to preload      var imgPreload   new Image          imgPreload  attr           src  photoUrl                check if the image is already loaded  cached       if  imgPreload complete    imgPreload readyState     4               image loaded            your code here to insert image into page        else             go fetch the image            imgPreload  load function  response  status  xhr                if  status     error                        image could not be loaded                 else                      image loaded                    your code here to insert image into page

User · Answer

I imagine that you define your image something like this    lt img id  image portrait  src    alt  chef etat   width  120  height  135     gt    You can simply load update image for this tag and chage set atts  width height    var imagelink  var height  var width      image portrait   attr  src   imagelink       image portrait   attr  width   width       image portrait   attr  height   height

User · Answer

after you get the image path  try either of following ways    as you need to set more attr than just the src  build the html and replace to the target region      target div   html   lt img src     imgPaht     width 100 height 100 alt  Hello Image    gt      you may need to add some delay if changing the  SRC  attr  setTimeout function      this function fire after 1ms delay           target img tag id   attr  src  imgPaht      1

User · Answer

lt img src     imgPath     gt    load function         this  width some  height some  appendTo   some target          If you want to do for several images then   function loadImage path  width  height  target            lt img src     path     gt    load function             this  width width  height height  appendTo target               Use   loadImage imgPath  800  800    some target

User · Answer

With jQuery 3 x use something like       lt img src     imgPath     gt    on  load   function         this  width some  height some  appendTo   some target

[javascript] Load image with jQuery and append it to the DOM

Examples related to javascript

Examples related to jquery

Examples related to image