使用 jQuery 加载图像并将其附加到 DOM

Posted 2023-03-15

【中文标题】使用 jQuery 加载图像并将其附加到 DOM

【英文标题】：Load image with jQuery and append it to the DOM

【发布时间】：2012-06-07 11:37:44

【问题描述】：

我正在尝试从给定链接加载图像

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

并将其附加到页面，以便我可以将其插入到给定元素中以供图像查看器使用。 即使我无休止地搜索了 *** 和 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://***.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()

);

;

【参考方案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');

【讨论】：

如果我想从图像中获取属性，比如它的高度和宽度，我该如何获取它？ $('<img src="'+ imgPaht +'" class="original">').load(function() var img = $(this); ... 似乎不起作用。

我们能不能停止忽略房间里的大象 - imgPath 拼写错误。谢谢。

@sq2..hi mate...检查大象imgPaht在OP的帖子和评论..谢谢:)

不再适用于 jQuery 3.x / 它因错误而崩溃：TypeError: e.indexOf is not a function

在 jQuery 3.x 中使用 .on('load', ...) 代替。 （见下面的答案）。

【参考方案2】：

获取图片路径后，尝试以下任一方式

（因为你需要设置更多的 attr 而不仅仅是 src） 构建html并替换到目标区域

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

如果更改“SRC”属性，您可能需要添加一些延迟

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

【参考方案3】：

我想你是这样定义你的图像的：

<img id="image_portrait" src=""      />

您可以简单地为此标签加载/更新图像并更改/设置 atts（宽度，高度）：

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

【参考方案4】：

var img = new Image();

$(img).load(function()

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

).attr(

  src: someRemoteImage

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

【讨论】：

这将创建和元素。加载它，然后将其附加到 DOM。它每次都完美地为我工作。

new 和 Image() 之间需要一个空格；

jQuery 建议在设置 src api.jquery.com/error 之前设置错误处理程序。 .error() 现在也被弃用了，所以最好使用 .on("error", ...

【参考方案5】：

这是我想在将图像附加到页面之前预加载图像时使用的代码。

检查图像是否已经从缓存中加载（对于 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

            
        );
    

【参考方案6】：

在 jQuery 3.x 中使用类似：

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