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

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

其实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内加载完成后就会执行此事件。

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
王凯
王凯

92 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章