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 <a> link        // Load the image path form the link var imgPath = $(imgLink).attr('href');  // Add image to html $('<img src="'+ imgPath +'" class="original">').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 > maxWidth) {         ratio = imgHeight / imgWidth;         imgWidth = maxWidth;         imgHeight = (maxWidth * ratio);     }     else if (imgHeight > 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 > imgHeight) {         topPosition = (maxHeight / 2) - (imgHeight / 2);     }     // x position     if(maxWidth > 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('<div id="backdrop"></div>');      // Set backdrop size     $("#backdrop").css("width", maxWidth);     $("#backdrop").css("height", maxHeight);      // reveal image     img.animate({opacity: 1}, 100)     img.show()  });  }; 

Answer 1

$('<img src="'+ imgPath +'">').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) {     $('<img src="'+ path +'">').load(function() {       $(this).width(width).height(height).appendTo(target);     }); } 

Use:

loadImage(imgPath, 800, 800, '#some_target'); 

Answer 2

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              }         });     }