web页面如何延迟加载运行javascript脚本

Life is short , play more!
本文来自lihao's Blog,转载请注明。

有时候,我们需要在某段<div></div>中加载这样一段js脚本

<script type=”text/javascript” src=”http://www.whoistester.com/test.js”></script>

但如果该脚本所在网站性能较差时, 可能会导致我们在加载该脚本时,导致我们自己的网站用户体验很差. 有时会卡在该<div></div>的展现地地方, 久久地不能继续加载下面的网页内容.

那么我们就需要延迟加载该脚本. 即当onload事件发生后,再运行js脚本. onload的事件,是在web页面完成加载后,会产生的一个事件.

我们可以这样来编写我们的的web页面:

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <div>
  8. <div id=”myscript”></div> 这里有很多的内容</div>
  9. <script type=”text/javascript”> <!– 这段脚本放到<body>的最后面,</body>前面即可–>
  10. window.loadGadget = function () {var codeUrl = ‘http://www.whoistester.com/test.js’
  11. var containerID = ‘myscript’
  12. var s = document.createElement(‘script’)
  13. s.type = ‘text/javascript’
  14. s.src = codeUrl + ‘?target=’ + containerID
  15. document.body.appendChild(s)
  16. }
  17. window.onload = window.onload ? function () {
  18. window.onload()
  19. window.loadGadget()
  20. } : window.loadGadget
  21. </script>
  22. </body>
  23. </html>

他的实际效果等同于下面,但是会延迟加载.

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <div>
  8. <div id=”gadgetContainer”><script type=”text/javascript” src=”http://www.whoistester.com/test.js”></script></div>这里有很多的内容</div>
  9. </body>
  10. </html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注