随机图片离线加载正常，嵌入网站后页面加载不显示问题排查与优化

问题描述 #

这段代码单独运行时完全正常，但嵌入网站后，页面加载时不再显示图片。怀疑问题出在window.onload上，想知道原因、优化方法，以及能否替换window.onload。

原代码 #

JavaScript代码

//$(document).ready(function(){choosePic;}
//alert(window.onload);
//https://stackoverflow.com/questions/2810825/javascript-event-window-onload-not-triggered;
window.onload = choosePic;
var onloadd = window.onload;
var myPix = new Array(
  "https://m.box.com/file/903146245504/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
  "https://m.box.com/file/1055524661946/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
  "https://m.box.com/file/896387464705/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png"
);

function choosePic() {
  var randomNum = Math.floor(Math.random() * myPix.length);
  document.getElementById("myPicture").src = myPix[randomNum];
  ('#myPicture').html(` ${myPicture} `);
  ('#today').html(` ${onloadd} `);
}

HTML代码

<button id="onloadd"></button>
<button id="myrdpbtn" style="background:transparent; border:transparent;" onclick="choosePic()">RandomPicture</button>
<button id="onloadd"></button><br>

<img src="https://ry3yr.github.io/OSTR/release/0mine/documents/art/empty.png" width="1000" id="myPicture"><br><br>

问题原因 #

1. window.onload被覆盖：网站中其他脚本若也使用window.onload = 函数的写法，会直接覆盖你的赋值，导致choosePic无法在页面加载时执行。
2. 代码语法错误：('#myPicture').html(...)和('#today').html(...)缺少jQuery的$前缀，且myPicture变量未定义、#today元素不存在，执行时会抛出错误，阻断后续逻辑（单独运行时可能未触发报错，但嵌入复杂网站环境中会暴露）。
3. 重复ID问题：HTML里有两个<button id="onloadd">，重复ID会导致DOM选择异常，干扰相关逻辑执行。
4. 资源加载时机冲突：window.onload需等待所有资源（图片、样式等）加载完成才触发，若网站有大型资源加载缓慢，可能延迟图片设置；若脚本在DOM元素加载前执行，也可能找不到#myPicture元素。

优化方案 #

1. 替换window.onload为DOMContentLoaded #

DOMContentLoaded在DOM结构加载完成后立即触发，无需等待所有资源加载，且支持添加多个监听事件，不会被其他脚本覆盖：

// 替换原有的window.onload = choosePic;
document.addEventListener('DOMContentLoaded', choosePic);

如果项目中引入了jQuery，也可以用：

$(document).ready(choosePic);

2. 修复语法错误与无效代码 #

• 删除无效的jQuery代码（若未引入jQuery），或修正为正确写法（若已引入）：

  function choosePic() {
    var randomNum = Math.floor(Math.random() * myPix.length);
    var imgElement = document.getElementById("myPicture");
    imgElement.src = myPix[randomNum];
    // 若需用jQuery，确保已引入库，再添加如下代码（按需）
    // $('#myPicture').attr('src', myPix[randomNum]);
    // 注意：#today元素不存在，需先在HTML中添加该元素再使用
    // $('#today').text(onloadd);
  }
  

• 移除重复的id="onloadd"按钮，保证每个DOM元素ID唯一。

3. 调整代码顺序（规范写法） #

将函数定义与变量声明放在事件绑定之前，提升代码可读性与稳定性：

var myPix = [
  "https://m.box.com/file/903146245504/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
  "https://m.box.com/file/1055524661946/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png",
  "https://m.box.com/file/896387464705/https%3A%2F%2Fapp.box.com%2Fs%2Fj7i88s6jb4yyk4wmiti4tol8ejoikdhl/preview/preview.png"
];

function choosePic() {
  var randomNum = Math.floor(Math.random() * myPix.length);
  document.getElementById("myPicture").src = myPix[randomNum];
}

// 绑定DOM加载完成事件
document.addEventListener('DOMContentLoaded', choosePic);

4. 验证图片URL的跨域可用性 #

检查Box提供的预览链接是否允许跨域嵌入，部分云存储的预览链接有防盗链限制，导致嵌入其他网站时无法加载。可直接在浏览器打开链接测试，或更换为支持跨域的图片托管地址。

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