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

Posted On 2013年12月16日

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

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

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

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

<!DOCTYPE>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div id=”myscript”></div> 这里有很多的内容</div>
<script type=”text/javascript”> <!– 这段脚本放到<body>的最后面，</body>前面即可–>
window.loadGadget = function () {var codeUrl = ‘http://www.whoistester.com/test.js’
var containerID = ‘myscript’
var s = document.createElement(‘script’)
s.type = ‘text/javascript’
s.src = codeUrl + ‘?target=’ + containerID
document.body.appendChild(s)
}
window.onload = window.onload ? function () {
window.onload()
window.loadGadget()
} : window.loadGadget
</script>
</body>
</html>

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

<!DOCTYPE>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div id=”gadgetContainer”><script type=”text/javascript” src=”http://www.whoistester.com/test.js”></script></div>这里有很多的内容</div>
</body>
</html>