jQuery中可自动执行回调的方法是什么？求图片/iframe专属的类.load()方法

好的，我来详细解答你的两个问题：

一、jQuery中自动运行回调函数的方法类型 #

在jQuery里，有几类方法会在完成特定操作后自动触发你传入的回调函数，主要分为以下几类：

• 异步AJAX请求方法
  这类方法在AJAX请求完成（成功/失败/完成阶段）时自动执行回调，比如 $.ajax()、$.get()、$.post()。举个例子：

  $.get('/api/data', function(response) {
    // 请求成功后自动执行这个回调，response是返回的数据
    console.log('拿到数据了：', response);
  });
  

  你可以通过success、error、complete参数指定不同阶段的回调。

• DOM/资源加载相关方法
  最常用的是 $(document).ready(function() { ... })，当DOM结构完全加载完成后，自动执行回调，避免操作未渲染的元素。另外，像图片、iframe这类资源的load事件绑定（通过on('load', callback)），也会在资源加载完成后自动触发回调——不过原来的load()方法（用于加载HTML到元素）已经被弃用了。

• 动画与效果方法
  比如 animate()、fadeIn()、slideUp() 这些动画方法，当动画执行完毕后，会自动调用你传入的回调：

  $('.modal').fadeOut(300, function() {
    // 动画结束后自动执行，this指向当前.modal元素
    $(this).remove();
  });
  

• 事件绑定后的自动触发
  虽然这不算方法主动运行回调，但用on()绑定事件（比如click、input）后，当事件自然触发时（用户点击按钮、输入内容），回调会自动执行，而且this默认指向触发事件的DOM元素。

二、封装仅支持图片和iframe的类.load()方法 #

因为原生jQuery的load()方法已经被移除，而且它支持所有元素的内容加载，我们可以自己封装一个仅针对img和iframe的自定义方法，同时确保回调里的this指向当前选择器元素。

自定义插件代码 #

// 注册jQuery自定义插件：.loadMedia()
$.fn.loadMedia = function(callback) {
  // 遍历选中的每个元素
  return this.each(function() {
    const $elem = $(this);
    // 只处理img和iframe标签，其他元素直接跳过
    if (!$elem.is('img, iframe')) return;

    // 定义回调执行函数，确保this绑定到当前DOM元素
    const runCallback = function() {
      if (typeof callback === 'function') {
        // 用call()强制把this绑定到当前元素
        callback.call(this);
      }
    };

    // 处理图片缓存问题：如果图片已经加载完成（缓存），直接触发回调
    if ($elem.is('img') && this.complete) {
      runCallback.call(this);
      return;
    }

    // 绑定load事件，触发时执行回调
    $elem.on('load', runCallback);
  });
};

使用示例 #

针对图片：

$('.gallery-img').loadMedia(function() {
  // this 指向当前加载完成的img DOM元素
  console.log('图片加载完成：', this.src);
  // 转换成jQuery对象操作
  $(this).addClass('loaded').fadeIn();
});

针对iframe：

$('iframe[src*="youtube"]').loadMedia(function() {
  console.log('YouTube iframe加载完成');
  $(this).css('border', '2px solid #333');
});

这个插件的行为和你需要的一致：只处理图片和iframe，回调里的this自动绑定到当前元素，还解决了图片缓存导致load事件不触发的问题。

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