如何根据文章高度自动生成足量侧边栏广告？解决offsetHeight为0问题

问题背景 #

页面存在文章文本与广告图片两个相邻元素，需求是自动生成尽可能多的广告，使广告总高度与文章高度匹配。当前通过selectADS函数可生成指定数量广告，但无法实现高度自动匹配，且获取广告offsetHeight时始终返回0。

核心问题 #

广告图片刚创建插入DOM时还未完成加载，此时offsetHeight无法获取到真实尺寸，所以返回0。必须等待图片加载完成后才能读取有效高度值。

解决方案实现 #

1. 重构广告生成函数 #

修改为基于剩余高度动态添加广告，同时处理图片加载完成后的高度计算逻辑：

function generateAdsToMatchHeight(targetContainer, adsArray, articleElement) {
  const articleHeight = articleElement.offsetHeight;
  let totalAdHeight = 0;
  const usedAdIndices = new Set(); // 用Set优化已用广告的查找效率

  // 递归添加广告直到高度匹配
  function addNextAd() {
    // 已达到或超过文章高度则停止
    if (totalAdHeight >= articleHeight) return;

    // 随机选取未使用过的广告
    let randomIndex;
    do {
      randomIndex = Math.floor(Math.random() * adsArray.length);
    } while (usedAdIndices.has(randomIndex));
    usedAdIndices.add(randomIndex);

    const adData = adsArray[randomIndex];
    // 创建广告链接与图片元素
    const link = document.createElement('a');
    link.href = adData.bannerHref;
    link.target = '_blank';

    const img = document.createElement('img');
    img.alt = adData.alt;
    img.src = adData.bannerUrl;

    // 图片加载完成后更新总高度并判断是否继续添加
    img.onload = function() {
      totalAdHeight += this.offsetHeight;
      addNextAd();
    };

    // 处理图片加载失败的情况，避免循环卡住
    img.onerror = function() {
      usedAdIndices.delete(randomIndex);
      addNextAd();
    };

    link.appendChild(img);
    targetContainer.appendChild(link);
  }

  // 启动广告生成流程
  addNextAd();
}

2. 函数调用方式 #

在DOM加载完成后调用重构后的函数：

document.addEventListener("DOMContentLoaded", () => {
  // rightSideBarAD为广告容器元素，box为文章元素
  generateAdsToMatchHeight(rightSideBarAD, ads, box);
});

3. 关键优化点 #

• 使用Set存储已用广告索引，相比数组includes方法，查找效率更高
• 必须在图片onload事件中获取高度，确保图片完全加载后拿到真实尺寸
• 新增图片加载失败处理逻辑，移除失败广告的索引并继续尝试添加
• 通过递归调用实现动态添加，每次添加后判断是否达到目标高度

进阶优化（可选） #

如果广告图片尺寸固定，可以提前在广告数据数组中存储高度值，无需等待图片加载即可直接计算总高度，提升执行效率：

// 示例：在adsArray中预先添加height字段
const ads = [
  { bannerHref: 'https://example.com/ad1', bannerUrl: 'https://example.com/ad1.jpg', alt: '广告1', height: 200 },
  { bannerHref: 'https://example.com/ad2', bannerUrl: 'https://example.com/ad2.jpg', alt: '广告2', height: 180 },
  // ...其他广告数据
];

// 此时可简化高度计算逻辑，无需等待onload
totalAdHeight += adData.height;

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