Cargar imagen con jQuery y añadirlo a la DOM

Question

Estoy tratando de cargar una imagen desde un enlace dado

var imgPath = $(imgLink).attr('href');

y añadirlo a la página, por lo que puedo insertarla en un determinado elemento para un visor de imágenes. Aunque busqué Stackoverflow y jQuery documentos sin final, no puedo resolverlo.

Después de cargar la imagen, quiero fijar valores diferentes a él, al igual anchura, altura, etc.

Actualización:

Esto es lo que tengo. El problema que tengo es que no puedo ejecutar las funciones de jQuery en el elemento img.

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

Si desea hacer por varias imágenes a continuación:

function loadImage(path, width, height, target) { 
    $('<img src="'+ path +'">').load(function() { 
     $(this).width(width).height(height).appendTo(target); 
    }); 
} 

Uso:

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

Answer 2

después de obtener la ruta de la imagen, pruebe una de las formas siguientes

1. (como es necesario establecer más attr que sólo el src) construir el HTML y reemplazar a la región de destino

   $('#target_div').html('<img src="'+ imgPaht +'" width=100 height=100 alt="Hello Image" />'); 
   

2. puede que tenga que añadir un poco de retraso si el cambio de "SRC" attr

   setTimeout(function(){///this function fire after 1ms delay 
        $('#target_img_tag_id').attr('src',imgPaht); 
   }, 1); 
   

Answer 3

imagino que defina su imagen algo como esto:

<img id="image_portrait" src="" alt="chef etat" width="120" height="135" /> 

Puede imagen/actualización basta con cargar para esta etiqueta y chage/set atts (anchura, altura):

var imagelink; 
var height; 
var width; 
$("#image_portrait").attr("src", imagelink); 
$("#image_portrait").attr("width", width); 
$("#image_portrait").attr("height", height); 

Answer 4

var img = new Image(); 

$(img).load(function(){ 

    $('.container').append($(this)); 

}).attr({ 

    src: someRemoteImage 

}).error(function(){ 
    //do something if image cannot load 
}); 

Answer 5

Este es el código que utilizo cuando quiero cargar previamente las imágenes antes de añadir a la página.

También es importante comprobar si la imagen ya está cargada desde el caché (para 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 

      } 
     }); 
    }