使用jQuery获取图片src设置为另一元素背景图失败问题排查

这个问题我之前碰到过类似的，大概率是脚本执行时机不对或者图片被懒加载/优化插件修改了src导致的，咱们一步步分析解决：

可能的原因 #

• 执行时机过早：你使用的jQuery(function() {})是DOM结构就绪就执行，但此时页面上的图片可能还没被完全初始化，或者已经被带有data-spai属性的图片优化/懒加载插件把原始src替换成了占位的base64 SVG，真实路径被临时存在了其他属性里。
• 第三方插件干扰：从你提供的HTML里的data-spai、data-spai-upd属性来看，应该有个图片处理插件在DOM就绪后立刻修改了图片的src值，你的代码执行时刚好赶上了这个替换过程，拿到的是占位图的路径；而控制台手动执行时，插件已经完成了真实图片的加载，所以能拿到正确路径。

解决方案 #

1. 等待所有资源加载完成后执行代码 #

把DOM就绪的回调换成window.load事件，确保页面所有图片、资源都加载完毕后再执行代码：

jQuery(window).on('load', function() {
  var event_image = jQuery('.evo_event_main_img').attr('src');
  jQuery(".ret_event_header").css("background-image", "url('" + event_image + "')");
});

这个方法能避开插件修改src的时机，保证你拿到的是最终加载完成的图片路径。

2. 直接读取图片的真实原始路径 #

如果插件把真实路径存在了自定义的data属性里，你可以先在控制台打印图片的data对象确认：

console.log(jQuery('.evo_event_main_img').data());

假设真实路径存在目标data属性里，就可以这样写：

jQuery(function() {
  // 读取data属性里的真实路径（根据控制台输出调整属性名）
  var event_image = jQuery('.evo_event_main_img').data('spai-upd');
  // 或者优先使用浏览器实际加载的路径currentSrc
  // var event_image = jQuery('.evo_event_main_img')[0].currentSrc || jQuery('.evo_event_main_img').attr('src');
  jQuery(".ret_event_header").css("background-image", "url('" + event_image + "')");
});

3. 监听图片的加载事件 #

如果图片是动态加载或懒加载触发后才替换src，可以给图片绑定load事件，确保图片加载完成后再设置背景：

jQuery(function() {
  var $targetImg = jQuery('.evo_event_main_img');
  
  // 检查图片是否已经加载完成
  if ($targetImg[0].complete) {
    setHeaderBackground();
  } else {
    // 未加载完成则监听加载事件
    $targetImg.on('load', setHeaderBackground);
  }

  function setHeaderBackground() {
    var event_image = $targetImg.attr('src');
    jQuery(".ret_event_header").css("background-image", "url('" + event_image + "')");
  }
});

快速验证方法 #

你可以先在原代码里加一句日志，确认执行时拿到的src是什么：

jQuery(function() {
  console.log('当前img的src值:', jQuery('.evo_event_main_img').attr('src'));
  var event_image = jQuery('.evo_event_main_img').attr('src');
  jQuery(".ret_event_header").css("background-image", "url('" + event_image + "')");
});

如果控制台输出的是base64 SVG，那就能坐实是插件提前修改了src，直接用上面的方案解决即可。

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