js怎么判断div下的内容全部加载完毕

JavaScript015

js怎么判断div下的内容全部加载完毕,第1张

如果是纯文字内容的话可以不用管文档加载到哪里了就加载完成了

如果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内容加载完成了过后将正在加载隐藏了

控制台显示的内容

js怎么判断flash是否加载完毕了呢?

我们怎么在flash加载完毕之时,回调一个我们设定的js函数?

这个问题,一直困扰了我很久,直到今天,请教了一个非常牛B的人物之后,突然来了感觉!

呵呵,也许,这个问题在你们看来不是问题,不过对于我来说,确实是个问题,因为我一直不知道该怎么判断swf文件是否加载完毕了?

从前都是只知道img.onload等等。

好了,言归正传,我们到底该怎样判断一个flash是否加载完了呢?

没错,就是轮询,然后判断flash的某个方法是否能正常运行?

示例如下(伪代码):

01 (function () {02 var flash = 网页上某个flash对象。03 04 var interval = setInterval(function () {05 try { 06 if(flash.IsPlaying()) { //轮询flash的某个方法即可 07 callBack &&callBack.call(flash, args)//回调函数08 clearInterval(interval) 09 } 10 } catch (ex) {11 12 } 13 }, 1000)14 15 var callBack = function () {16 alert('loaded')17 } 18 })()

//具体运用时,flash放进setInterval或者setTimeout的函数闭包中时,可能会由于JavaScript单线程问题,导致flash不能调用IsPlaying等flash player函数或者调用结果不对等状况,这里有个临时的解决办法,我们可以读取在轮询函数中读取flash的TotalFrames属性,读取得到,我们就可以认为flash已经完全加载到页面中了!!!