web-dev-qa-db-fra.com

Charger une image avec jQuery et l'ajouter au DOM

J'essaie de charger une image à partir d'un lien donné

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

et l'ajouter à la page pour que je puisse l'insérer dans un élément donné pour un visualiseur d'images. Même si j'ai cherché Stackoverflow et la jQuery sans fin, je peux pas le comprendre.

Après avoir chargé l’image, je souhaite définir différentes valeurs, comme la largeur, la hauteur, etc.

Mise à jour:

C'est ce que j'ai eu. Le problème que je rencontre est que je ne peux pas exécuter les fonctions jQuery sur l'élément 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()

});

};
javascriptjqueryimage
38
wowpatrick
$('<img src="'+ imgPath +'">').load(function() {
  $(this).width(some).height(some).appendTo('#some_target');
});

Si vous voulez faire plusieurs images alors:

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

Utilisation:

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

Voici le code que j'utilise pour précharger des images avant de les ajouter à la page.

Il est également important de vérifier si l'image est déjà chargée à partir du cache (pour 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

            }
        });
    }
16
George Filippakos
var img = new Image();

$(img).load(function(){

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

}).attr({

  src: someRemoteImage

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

après avoir obtenu le chemin de l'image, essayez l'une des méthodes suivantes

  1. (car vous devez définir plus d'attr que la src) construisez le code HTML et remplacez-le par la région cible

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

  2. vous devrez peut-être ajouter un peu de retard si vous changez l'attribut "SRC"

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

J'imagine que vous définissez votre image comme ceci:

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

Vous pouvez simplement charger/mettre à jour l'image pour cette balise et modifier/modifier les atts (largeur, hauteur):

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

Avec jQuery 3.x, utilisez quelque chose comme:

$('<img src="'+ imgPath +'">').on('load', function() {
  $(this).width(some).height(some).appendTo('#some_target');
});
0
solarbaypilot