2load事件可以载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
3参数url,[data,[callback]]
url:待装入 HTML 网页网址。
4data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
5callback:载入成功时回调函数。
6例子$("#test").load("index.html")在元素test中载入index页面
如果是纯文字内容的话可以不用管文档加载到哪里了就加载完成了
如果div下面有图片的话(img标签就需要进行判断了)
这里给出一份演示代码
<!DOCTYPE html><html>
<head>
<title></title>
</head>
<body>
<div id="d">
<div id="loading">正在加载。。。</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494214281262&di=ef0111cb95c5477f2dfc94acad9185dd&imgtype=0&src=http%3A%2F%2Fh5.86.cc%2Fwalls%2F20141217%2F1440x900_23b73a6904487a6.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494214281262&di=d9369e8911c7ad7f74ca4427bdbfed51&imgtype=0&src=http%3A%2F%2Fpic10.nipic.com%2F20100929%2F4308872_150108084472_2.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494214281262&di=87878630fa4786df3cdf8b09d8ec0d61&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2013%2Fmxy%2F12%2F11%2F4%2F3.jpg">
</div>
<script type="text/javascript">
var div=document.getElementById("d")
function OnLoadElement(e){
var img= e.getElementsByTagName("img")
var num=0
if(img.length<=0){
return 1
}
for(var i=0i<img.lengthi++){
(function(j){
if(!img[j].complete){
img[j].onload=function(){
num++
console.log("已经加载图片:"+num+"/"+img.length)
if(num==img.length){
document.getElementById("loading").style.display="none"
console.log("内容加载完成")
}
}
}else{
num++
console.log("已经加载图片:"+num+"/"+img.length)
if(num==img.length){
document.getElementById("loading").style.display="none"
console.log("内容加载完成")
}
}
})(i)
}
}
OnLoadElement(div)
</script>
</body>
</html>
该演示在div内容加载完成了过后将正在加载隐藏了
控制台显示的内容
