有没有办法在更改图像的 src 后绑定到图像的 load() 事件？答案

【问题标题】：Is there a way to bind to the load() event of an image after changing it's src?有没有办法在更改图像的 src 后绑定到图像的 load() 事件？
【发布时间】：2010-09-26 22:34:50
【问题描述】：

我有一张图片<img id='my_img' src='img1.png'> 和一个按钮。单击按钮执行以下操作：

$('#my_img').attr('src','img2.png')

第二张图片 (img2.png) 相当大，我想知道它何时完全加载（即 .load() 事件）。我尝试使用 .live、.bind 和 .complete，但似乎都没有触发。

有什么想法吗？

谢谢！阿米特

【问题讨论】：

标签： jquery image load

【解决方案1】：

我认为每个 img 标签只会触发一次 load 事件。但是您可以轻松制作新图像，并使用新的加载处理程序加载它。

var img = new Image();
img.onload = function() {
  $('#my_img').attr('src', img.src);
};
img.src = 'img2.png';

加载后，您可以在页面上设置图像的 src，它会立即从浏览器缓存中提取。

【讨论】：

完美，谢谢！我想那时没有办法避免创建新图像。

【解决方案2】：

你可以这样做：

$('<img id="myimg" src="1.png" /><a href="" id="clickme">click</a>').appendTo('body');

$('#clickme').click(function() {
    // replace the old img with a new one and define onLoad for the new img
    var newImg = $('<img />')
        .bind('load', function() {
            alert('2nd img loaded');
        })
        .attr('src', '2.png');
    $('#myimg').replaceWith(newImg);
    return false;
});

【讨论】：