如何使用JavaScript为HTML div设置背景图片及赋值失效问题解决

核心原因 #

• 跨域拦截：XMLHttpRequest发送HEAD请求属于AJAX请求，若图片所在服务器没有配置CORS允许你的站点跨域访问，请求会直接被浏览器拦截，无法拿到200状态码，不会进入返回url的分支。
• 同步XHR限制：当前你使用的是同步模式的XHR（http.open('HEAD', url, false)第三个参数为false），主流浏览器已逐步限制、废弃主线程的同步XHR，会直接阻止请求执行。
• 逻辑缺漏：当请求失败进入else分支时，checkImage函数没有返回任何有效值，导致backgroundImage被赋值为undefined，样式不生效；同时else分支中的parentdiv变量未提前声明赋值，会直接抛出未定义错误，中断JS执行。
• 服务器HEAD请求限制：部分静态资源服务器会直接拒绝HEAD类型的请求，哪怕图片真实存在也会返回非200的状态码，导致判断逻辑失效。

解决方案 #

推荐使用无跨域问题的Image预加载方案，不需要服务器额外配置，兼容性更好：

const bannerElement = document.getElementById('imagebannerthree');
const targetImgUrl = "https://*****.com.au/wp-content/custom-products/1628/bottom-3.jpg";
// 创建临时Image对象校验图片可用性
const tempCheckImg = new Image();
tempCheckImg.src = targetImgUrl;
// 图片加载成功则设置背景图
tempCheckImg.onload = function() {
  bannerElement.style.backgroundImage = 'url(' + targetImgUrl + ')';
}
// 图片加载失败则执行删除逻辑
tempCheckImg.onerror = function() {
  // 提前给parentdiv赋值为你要删除的父元素实际ID
  const parentdiv = '替换为你的父元素ID';
  document.getElementById(parentdiv)?.remove();
}

如果必须使用HEAD请求校验的方案，需要先让图片服务器配置CORS允许你的站点跨域请求，同时调整为异步请求、修复变量问题：

// 异步校验图片是否存在
async function checkImage(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch (err) {
    console.error('图片校验失败：', err);
    return false;
  }
}
// 执行背景图设置逻辑
async function setBannerBg() {
  const bannerElement = document.getElementById('imagebannerthree');
  const targetImgUrl = "https://*****.com.au/wp-content/custom-products/1628/bottom-3.jpg";
  const imgAvailable = await checkImage(targetImgUrl);
  if (imgAvailable) {
    bannerElement.style.backgroundImage = 'url(' + targetImgUrl + ')';
  } else {
    const parentdiv = '替换为你的父元素ID';
    document.getElementById(parentdiv)?.remove();
  }
}
setBannerBg();

注意事项 #

• 不要在主线程使用同步XHR，会阻塞页面渲染，严重影响用户体验，该特性已经被Web标准列入废弃列表。
• 所有用到的变量必须提前声明赋值，避免未定义错误导致JS执行中断。
• 静态资源的可用性校验优先使用Image对象预加载方案，无需额外跨域配置，兼容性远高于AJAX类请求方案。

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