本地运行HTML页面加载CDN图片时闪烁后消失问题求助

问题根因排查 #

你的图片闪烁消失问题不是单一原因导致的，核心和布局逻辑错误有关，附带JS不规范写法的潜在影响：

• 核心布局错误：你给所有div统一设置了width:300px;height:250px的固定尺寸，两个div默认走普通文档流上下排列，总高度达500px，但你仅给body设置了250px高度，加上body默认自带8px的外边距，广告图片加载完成显示后，第二个Logo div加载完成会把第一个广告div向上挤出视口，就出现了闪一下消失的表现。你原本想实现的Logo悬浮在广告右下角的效果，用普通流布局根本无法实现，必须用定位逻辑。
• JS潜在异常：代码中误用了Java的System.out.println("Error")语法，浏览器JS不存在这个API，当传入的type参数不匹配时会直接抛出异常，中断后续JS执行导致图片赋值失败。另外head标签中提前执行document.getElementById("imgad")时DOM还未解析完成，获取到的是null值，属于不规范写法，容易引发偶发渲染问题。
• 标签不规范：<img>是自闭合标签，你写的<img></img>在部分旧浏览器会出现渲染异常，空src属性也会触发部分浏览器发起无效资源请求，加重闪烁表现。

修复方案 #

CSS修改 #

/* 重置默认边距，加相对定位方便子元素绝对定位 */
body{
  height:250px;
  width:300px;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden; /* 避免超出内容出现滚动条 */
}
/* 移除全局div固定尺寸，单独给广告容器设置 */
#adimg {
  width: 300px;
  height: 250px;
}
#imgad {
  height: 250px;
  width: 300px;
  display: block; /* 消除img默认下方留白 */
  border: none;
}
/* Logo容器绝对定位固定在右下角，不占普通流位置 */
#OneGLogo {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: auto;
  height: auto;
}
#LogoIMG {
  display: block;
  /* 按需设置Logo尺寸，避免加载后撑开容器 */
  width: 24px;
  height: 24px;
}

JS修改 #

1. 把System.out.println("Error")替换为console.log("Error")
2. 移除head中两行提前获取DOM的无效代码：

// 删掉这两行，DOM未加载时获取不到元素
var imgsource = document.getElementById("imgad");
var htmlsource = document.getElementById("htmlad");

3. 给img标签加上透明占位src，避免空src问题：

<img id="imgad" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">

修复后两个div不会互相挤压，图片加载完成后会一直固定显示，Logo也会正常悬浮在右下角。

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