怎么让图片优先于音频媒体文件加载

发布于 2022-09-02 13:02:49 字数 883 浏览 28 评论 0

我的HTML大致结构

<html>
<head>
   <link rel="stylesheet" href="styles/play.css" type="text/css"/>
   <script type="text/javascript">(function preloadImages() {
        if (document.images) {
            var img1 = new Image();
            img1.src = "./images/demo.png";
        }
    })();
    </script>
</head>
<body>
    <div style="display:none">
        <div id="bg"></div>
    </div>
    <audio id="gameMusic" class="music"
           src="http://m2.music.126.net/AOChMFXWryJzWO2vR5iwIw==/7797736464973704.mp3"          
           hidden="true" loop="true">
    </audio>
</body>
</html>

play.css

#bg{
   background-image:url("./images/demo.png")
}

发现即使预加载demo图片,媒体文件还是会先加载,demo会被pending起来等媒体加载完才开始加载。怎么才能使我的图片优先于音频文件加载?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

东走西顾 2022-09-09 13:02:49

一般对资源加载顺序有要求时,我使用https://github.com/englercj/resource-loa...

触ぅ动初心 2022-09-09 13:02:49

浏览器并发请求数有一定限制,按照执行流程来说会先加载stylesheet文件的,没有测试过stylesheet里面的图片文件的加载顺序。

你的preloadImages在哪里执行的?
还有document.images这个是什么?

因为不知道你具体的需求,所以如果你要保证图片加载完成再加载媒体文件这个需求的话,可以使用代码来控制。
在图片加载完成之后,再加载媒体文件,大概流程是这样的:

var img=new Image();
img.src='xxx';//图片路径
img.onload=function(){
    //图片加载完成处理媒体文件
    //audio.src='';//
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文