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

我的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起来等媒体加载完才开始加载。怎么才能使我的图片优先于音频文件加载？

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

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

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

var img=new Image();
img.src='xxx';//图片路径
img.onload=function(){
    //图片加载完成处理媒体文件
    //audio.src='';//
}

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

【热门文章】