js怎么判断div下的内容全部加载完毕
3个回答
展开全部
如果是纯文字内容的话可以不用管文档加载到哪里了就加载完成了;
如果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=0;i<img.length;i++){
(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内容加载完成了过后将正在加载隐藏了
控制台显示的内容
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
JS的开发人员可能也遇到过类似情况，所以为此情况设计了专用的事件：onload事件
window.onload = function() {
//你的代码
}window.onload = function() {} 指window在onload（加载完成，可以去W3Cschool搜一下onload）后执行的代码，规定了只有在页面加载完成后才执行，确保了页面的各元素完成加载。
//例如
<img id="img" src="一张很大的图片.jpg" />
<script>
window.onload = function() {//加载完成后
console.log(document.getElementById('img'))//获取id为img的元素
//将输出的结果为a
}
</script>
<img id="img" src="一张很大的图片.jpg" />
<script>
console.log(document.getElementById('img'))//加载时就获取id为img的元素
//将输出的结果为b
</script>
经过比较，会发现a输出时需要等待的时间比b长很多，但b在图片未加载完成之前就被输出了出来。而a是在图片加载完成后才被输出出来。
所以确保了加载全部完毕。
//备注：jquery 的方法为
$(function(){
//你的代码
})
//使用方法近似
一个页面中需要避免出现多个window.onload = function() {}，会出现意想不到的错误。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(document).ready(function() {
$("你的id").load(function (){
alert("Loaded :)");
});
});
$("你的id").load(function (){
alert("Loaded :)");
});
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
