Javascript 如果调用预加载内容的脚本没有'；我找不到_Javascript_Html

Javascript 如果调用预加载内容的脚本没有'；我找不到

javascript html

Javascript 如果调用预加载内容的脚本没有'；我找不到,javascript,html,Javascript,Html,假设我有这个： index.css .div-class { background-image: url('image-1.jpeg'); width:200px; height:200px; } index.html <html> <head> </head> <body> <link rel="preload" as="image" href="image-1.jpeg" /> <li

假设我有这个：

index.css

.div-class {
    background-image: url('image-1.jpeg');
    width:200px;
    height:200px;
}

index.html

<html>
<head>
</head>
<body>
    <link rel="preload" as="image" href="image-1.jpeg" />
    <link rel="stylesheet" href="index.css"  />    
    <div class="div-class">
    </div>
</body>
</html>

我正在使用chrome的慢速网络。index.css为400B，image-1.jpeg为280kb。

现在，如果您查看index.html代码，就会发现下载image-1.jpeg是因为预加载。大概需要8秒钟。同时，index.css开始下载，但由于它是400B，所以它立即下载。所以我们已经下载了index.css，并且仍然在下载预加载的image-1.jpeg。运行index.css的时间到了。在这里，我们得到了image-1.jpeg，包括，所以我的问题如下：

浏览器已开始下载image-1.jpeg。当它到达

背景图像时：url（'image-1.jpeg'），它到底做什么？当然，它不能从缓存中获取图像，因为预加载尚未完成，并且它没有将图像放入HTTP缓存中。所以浏览器发现下载image-1.jpeg已经开始了，但什么都没做？等待下载并将图像放入src