如何让页面加载完成后执行js

如题所述

让页面加载完执行js有2种方法,js放在文档代码的下方和把语句代码放在window.onload方法里面。

js放在文档代码的下方

这是一个最简单的文档结构,引用的javascript文件都放在body的最下方和把语句放在window.onload函数里面,可以让javascript在页面加载完成后执行。

<!doctype html>  

<html>  

<head> 

<title>helloWorld--zxk</title>  

</head>  

<body>

<div></div>

<script src="xxx"></script>

</body>  

</html>  

把语句代码放在window.onload函数里面

例如这段代码,虽然script标签没有在最下方,但javascript语句放在了window.onload里面,所以可以在文档加载完成后执行。

<!doctype html>

<html>

<head>

<title>helloWorld--zxk</title>

<script>

      window.onload=function(){

    alert('页面加载完成!');

      }

</script>

</head>

<body>

<div></div>

</body>

</html>

温馨提示:答案为网友推荐,仅供参考
第1个回答  2017-06-15

可以使用window.onload=function(){}或者使用jQuery的$(function(){})来解决,写在以上两个代码块的中的时候都会在页面所有dom创建完成后再执行其中的代码。

工具原料:编辑器、浏览器

一、使用window.onload方法

使用 window.onload 来处理页面,当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成,甚至包括图片,简单的代码示例如下:

<body>
<script>
window.onload=function(){
document.getElementById('div1');
}
</script>
<div id="div1">
test
</div>

</body>

以上代码是在创建完dom后在执行js代码随意可以获取到该元素。

方法二:使用$(function(){})

使用$(function(){})代码可以起到和window.onload一样的效果,简单的代码示例如下:

<body>
<script>
$(function(){
$('div1').html('test');
})
</script>
<div id="div1">
test
</div>

</body>

同样可以改变div元素内的内容,因为js也是在dom创建完后才执行。

第2个回答  2014-12-17
window.onload = function(){//等待页面内DOM、图片资源加载完毕后触发执行
    //TO DO
}

本回答被提问者和网友采纳

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网