如何选择jQuery事件触发动态加载图片的imgResize函数？

嗨，我明白你的困扰——初始加载的图片能正常缩放，但动态添加的就不行，这是因为ready()只在DOM首次加载完成时触发一次，对后续新增的元素完全无效。下面给你几个实用的解决方案：

方案1：用事件委托监听图片的load事件 #

这是最通用的方法，适合所有动态添加的图片。你可以把事件绑定到图片的父容器（比如你的画廊容器）上，利用jQuery的事件委托机制，让后续新增的图片也能触发缩放函数：

// 假设你的画廊容器类名为.image-gallery
$('.image-gallery').on('load', 'img', function() {
  // 调用你的缩放函数，传入当前加载完成的图片元素
  imgResize($(this));
});

为什么这个能生效？因为事件委托是把事件绑定到已经存在于DOM中的父元素上，当动态添加的图片触发load事件时，父元素会把事件传递给它，这样不管什么时候新增图片，只要加载完成就会触发你的缩放逻辑。

方案2：动态插入图片后直接触发缩放 #

如果你是通过特定的代码（比如AJAX请求后、点击按钮添加图片）插入图片，可以在插入完成后，直接给新图片绑定load事件或者调用缩放函数：

// 举个例子：动态创建并插入图片
var newImage = $('<img src="your-image-url.jpg" alt="描述">');
$('.image-gallery').append(newImage);

// 等图片加载完成后调用缩放
newImage.on('load', function() {
  imgResize($(this));
});

这里要注意必须监听load事件，而不是插入后立即调用——因为图片的宽高需要等图片完全加载后才能获取到，直接调用可能会拿到0值，导致缩放失效。

额外小技巧：处理图片缓存的情况 #

有时候浏览器会缓存图片，导致load事件不会触发，这时候可以先检查图片是否已经加载完成：

var img = new Image();
img.src = "your-image-url.jpg";

if (img.complete) {
  // 图片已经缓存，直接调用缩放
  imgResize($(img));
} else {
  // 图片未缓存，监听load事件
  $(img).on('load', function() {
    imgResize($(this));
  });
}

// 最后把图片添加到DOM
$('.image-gallery').append(img);

这样就能覆盖缓存和非缓存的两种情况，确保缩放函数总能正确触发。

内容的提问来源于stack exchange，提问作者user9275531