js-用判断音乐或图片是否加载完成的方式来控制页面的现实

墨蓝 2024-04-20 11:10 79阅读 0赞

判断页面加载，加完完成后，内容页显示，加载条隐藏

百度搜索方法很多，大多都是：

document.onreadystatechange = function() 　　//当页面加载状态改变的时候执行function
    
    { 
    
    　　 if(document.readyState == "complete")
    
    　　{ 　　//当页面加载状态为完全结束时进入 
                  init();　　 //你要做的操作。
       　 }
    }

上面的方法我测试后是可以这样来操作的，但是页面也会出现：

document.readyState == "interactive"

上面这种情况。好吧我可能想到了。上面的方法是对的。

但是我还是被安利了一种新的方法

![1048652-20190809155959371-1239718747.jpg][]

判断页面中的用的音乐或一张大的图片的加载进度来控制页面的隐藏显示，加载条的隐藏显示

方法如下：

var ajax = new XMLHttpRequest();
    ajax.open("get", "http://******/loading.mp3")
    	ajax.responseType = "blob";
    	ajax.send();
    	ajax.onprogress = function(event) {
    	}
    	ajax.onreadystatechange = function() {
    		if(ajax.readyState == 4 && ajax.status == 200) {
    			document.getElementById("audio").src = URL.createObjectURL(ajax.response);
    			document.getElementById('audio').play();  
    			setTimeout(function(){
    		               	document.getElementById('loading').style.display='none';
    		               	document.getElementById("page").style.display='block';
    		        },1000)   
                     }
    	}

转载于:https://www.cnblogs.com/liuqingxia/p/11327613.html

[1048652-20190809155959371-1239718747.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8e66cfd46e44467bad158959a1cf4978.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 js-用判断音乐或图片是否加载完成的方式来控制页面的现实

断页面加载，加完完成后，内容页显示，加载条隐藏百度搜索方法很多，大多都是： document.onreadystatechange = function()...

墨蓝/ 2024年04月20日 11:10/ 0 赞/ 80 阅读

相关判断图片是否加载完成的六种方式

[判断图片是否加载完成的六种方式][Link 1] 一、load事件 `<!DOCTYPE HTML>` `<html>` `<head>` ` ``<

拼搏现实的明天。/ 2023年02月20日 15:56/ 0 赞/ 36 阅读

相关 [JavaScript]判断图片是否加载完毕

<body> <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" id="img"

电玩女神/ 2022年11月28日 10:27/ 0 赞/ 207 阅读

相关 js判断各种资源是否加载完成的方法汇总，资源预加载问题

将网站放在服务器后，因为服务器带宽问题，才发现很多资源比如图片、音频在网站打开后1分钟还没有加载，导致无法播放。所以说我决定使用js在最开头加一个判断资源是否加载完成的函数并运

古城微笑少年丶/ 2022年11月05日 00:47/ 0 赞/ 2196 阅读

相关 html页面里的js无法加载图片,js或jquery如何判断网页图片是否已载入完成

要想判断网页中的图片是否已加载完成，可以使用下面的三种方法。 onload方法通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如

ゞ浴缸里的玫瑰/ 2022年10月06日 07:54/ 0 赞/ 159 阅读

相关判断图片加载完成的JS操作

var a = { init:function(){ this.initDom(); this.handleImg

朴灿烈づ我的快乐病毒、/ 2022年09月26日 04:59/ 0 赞/ 223 阅读

相关判断js加载完成

判断js加载完成，（实现函数loadScript(url,callback)异步加载脚本，完成后执行回调函数，要求支持IE）在“按需加载”的要求中，经常要判断当脚本加载完成

清疚/ 2022年06月02日 04:08/ 0 赞/ 338 阅读

相关 js等待页面加载完成的几种方式

资源贴 [https://blog.csdn.net/ideality\_hunter/article/details/77935656 ][https_blog.csdn

刺骨的言语ヽ痛彻心扉/ 2022年05月14日 10:00/ 0 赞/ 1613 阅读

相关判断图片是否加载完成的六种方式

一、load事件 `<!DOCTYPE HTML>` `<html>` `<head>` ` ` `<meta charset=` `"utf-8"` `>`

爱被打了一巴掌/ 2022年01月07日 14:13/ 0 赞/ 953 阅读

相关 Jquery判断页面图片是否加载失败,加载失败则显示默认图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

电玩女神/ 2021年07月24日 16:19/ 0 赞/ 500 阅读