使用jQuery加載圖像並將其附加到DOM

Question

我正在嘗試從給定的鏈接加載圖像

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

並將其附加到頁面，因此我可以將其插入到圖像查看器的給定元素中。 即使我搜索Stackoverflow和jQuery文檔沒有結束，我無法弄明白。

加載圖像后，我想為它設置不同的值，如寬度，高度等。

更新：

這就是我得到的。 我遇到的問題是我無法在img元素上運行jQuery函數。

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

如果你想為幾張圖片做，那么：

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

使用：

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

Answer 2

這是我在將圖像附加到頁面之前預先加載圖像時使用的代碼。

檢查圖像是否已從緩存加載（對於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

            }
        });
    }

Answer 3

var img = new Image();

$(img).load(function(){

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

}).attr({

  src: someRemoteImage

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

Answer 4

獲得圖像路徑后，請嘗試以下方法之一

1. （因為你需要設置更多的attr而不僅僅是src）構建html並替換到目標區域

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

2. 如果更改“SRC”attr，您可能需要添加一些延遲

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

Answer 5

我想你定義你的圖像是這樣的：

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

您只需加載/更新此標記的圖像和chage / set atts（寬度，高度）：

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

Answer 6

使用jQuery 3.x使用類似：

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