如何在HTML中用div设置onload事件？调用gh_success加载失效求助

嘿，我来帮你解决这两个前端问题～

其实<div>元素本身没有原生的onload事件哦——这个事件一般是给需要加载外部资源的元素（比如<img>、<script>、<iframe>）或者最顶层的window对象用的。不过如果想实现“当div渲染完成后执行代码”的效果，有几个靠谱的办法：

• 把脚本直接放在div标签后面：
  浏览器是从上到下解析HTML的，所以把脚本写在div之后，就能确保div已经被渲染到页面上了，比如：

  <div id="myDiv">这是我的div</div>
  <script>
    // 这里可以放心操作myDiv，它已经存在啦
    console.log(document.getElementById('myDiv'));
  </script>
  

• 监听DOMContentLoaded事件：
  这个事件会在整个HTML文档解析完成、DOM树构建好之后触发，不管外部资源（比如图片）有没有加载完，适合大部分场景：

  <div id="myDiv">这是我的div</div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 此时div已经就绪，随便折腾～
      const myDiv = document.getElementById('myDiv');
      // 比如给div加样式、绑定事件都没问题
    });
  </script>
  

• 如果是动态创建的div：
  要是你用JS动态生成div，那在把它添加到DOM之后直接执行代码就行：

  const myDiv = document.createElement('div');
  myDiv.textContent = '动态创建的div';
  document.body.appendChild(myDiv);
  // 此时div已经在页面里了，直接执行操作
  console.log('div加载完成啦');
  

你遇到的问题大概率是Lobibox还没完全初始化好，你的gh_success()就提前执行了——虽然window.load是等所有外部资源加载完才触发，但有时候还是会有脚本顺序或者初始化时机的问题。试试下面这些方案：

1. 改用DOMContentLoaded事件（更稳妥的时机） #

DOMContentLoaded是HTML解析完成、DOM就绪后就触发，比window.load早，而且只要你把Lobibox的脚本放在自定义代码前面，就能确保它已经加载：

<script>
document.addEventListener('DOMContentLoaded', function() {
  gh_success();
});
</script>

2. 严格控制脚本加载顺序 #

必须让Lobibox的CSS、JS（还有它依赖的jQuery！）先加载，再加载你的gh_success()函数和调用代码，顺序不能乱：

<!-- 先加载jQuery（Lobibox依赖它） -->
<script src="jquery.min.js"></script>
<!-- 再加载Lobibox的样式 -->
<link rel="stylesheet" href="lobibox.min.css">
<!-- 然后加载Lobibox的脚本 -->
<script src="lobibox.min.js"></script>
<!-- 最后放你的自定义函数和调用代码 -->
<script>
function gh_success() { 
  Lobibox.notify('success', { 
    pauseDelayOnHover: true, 
    continueDelayOnInactiveTab: false, 
    position: 'center top', 
    showClass: 'rollIn', 
    hideClass: 'rollOut', 
    icon: 'fa fa-check-circle', 
    width: 600, 
    msg: 'Your Withdrawal request has been successfully placed,' 
  }); 
}

// 页面就绪后调用函数
document.addEventListener('DOMContentLoaded', gh_success);
</script>

3. 把调用脚本放在页面最底部 #

把你的调用代码放在</body>标签的前面，这样能确保页面所有元素和脚本都已经加载完毕：

<body>
  <!-- 页面内容 -->
  <td><button class="btn btn-success" onclick="gh_success()">SHOW ME</button></td>

  <!-- 先加载所有依赖资源 -->
  <script src="jquery.min.js"></script>
  <link rel="stylesheet" href="lobibox.min.css">
  <script src="lobibox.min.js"></script>
  <!-- 你的函数 -->
  <script>
  function gh_success() { 
    // 函数内容不变
  }
  </script>
  <!-- 最后直接调用 -->
  <script>
    gh_success();
  </script>
</body>

4. 检查Lobibox的依赖是否齐全 #

别忘了Lobibox是依赖jQuery的，如果没加载jQuery，就算函数调用了也不会显示通知，一定要确保jQuery在Lobibox之前加载哦～

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