Js的onload加载事件与JQ的load()加载方法详解

其实Js的onload加载事件与JQ的load()加载方法效果是一样的,只不过在jq中被封装改变了写法,虽然JQ中也可以使用原生JS的方法,但不推荐,因为JQ操作起来要比JS简化的多,为了让大家看的更清晰,下面同时列出JS和jq的方法。

 

jq的load()方法 使用时别忘记引入JQ的链接和将图片的路径改成你自己的
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("img").load(function(){
    $("div").text("图像已加载");
  });
});
</script>
</head>
<body>
<img src="/i/shanghai_lupu_bridge.jpg" />
<div>图像正在加载中 ...</div>
<p><b>注释:</b>根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。</p>
</body>
</html>

此案例中将加载事件给了图片,效果是刷新页面时,div的文字从图像正在加载中 ...切换为图像已加载,其实就是图片在加载完成后执行了事件。

 

JS的onload方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
alert("页面加载完成");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>

效果就是在页面加载完成后弹出弹框,将此方法给了body,也就是是说,body内加载完成后就会执行此事件。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/604.html