其实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内加载完成后就会执行此事件。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!