我有一个基本的Node js Express Web应用程序，前端有webix UI。
有很多组件/表需要填充大量数据。
我有一个加载屏幕，其中包含一些背景图像，每 3 秒更改一次背景图像 URL，直到所有数据的加载完成。
加载屏幕的问题在于图像不是浏览器下载的第一件事。表格有时甚至在下载图像之前就已经填充，它击败了加载屏幕的全部目的。
我想知道是否有办法在浏览器中打开应用程序时首先加载这些图像。
以下是 HTML 代码：
<body>
<div id="container-id" class="container">
<div id="text-id" class="text">Loading...</div>
</div>
</body>
这是 CSS：
@-webkit-keyframes changeBg
{
0% {background-image: url("/resources/images/one.jpg");}
25% {background-image: url("/resources/images/two.jpg");}
50% {background-image: url("/resources/images/three.jpg");}
75% {background-image: url("/resources/images/four.jpg");}
100% {background-image: url("/resources/images/five.jpg");}
}
.container {
height: 100%;
width: 100%;
background-image: url("/resources/images/one.jpg");
-webkit-animation: changeBg 15s infinite;
background-size: 100%;
background-position: center;
}
基于这个类似的问题：先加载特定图像
我尝试使用 javascript 加载图像作为索引页的前几行，如下所示：
<head>
<script type="text/javascript">
(new Image()).src= window.location.href + "resources/images/one.jpg";
(new Image()).src= window.location.href + "resources/images/two.jpg";
(new Image()).src= window.location.href + "resources/images/three.jpg";
(new Image()).src= window.location.href + "resources/images/four.jpg";
(new Image()).src= window.location.href + "resources/images/five.jpg";
</script>
<link rel="stylesheet" href="webix.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="app.css" type="text/css" media="screen" charset="utf-8" />
</head>
但是，其他请求仍然会在图像之前得到服务。
实际上脚本是按照它们放置在head中的顺序加载的。浏览器不会等待事件被引发，然后加载其他脚本(这没有意义(。因此，您的脚本已完全加载，但不会引发图像加载event。
因此，我们必须await，直到加载所有图像then加载脚本。
这是代码：
<script type="text/javascript">
function loadImageAsync(url) {
return new Promise((resolve) => {
let img = new Image();
img.src = url;
img.addEventListener('load', e => resolve(img));
});
};
async function loadImages() {
var im1 = loadImageAsync("imageUrlOne");
var im2 = loadImageAsync("imageUrlTwo");
var image1 = await im1;
console.log(`image one loaded..., url:${image1.src}`)
var image2 = await im2
console.log(`image two loaded..., url:${image2.src}`)
}
function loadScript(url) {
var script = document.createElement("script")
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadImages().then(() => {
console.log("loading scripts...");
loadScript("script 1 url here");
loadScript("script 2 url here");
});
</script>
你可以使用 react js 来处理这样的事情，Reactjs 让很多这样的事情变得简单。 要了解有关 反应 .
访问： https://reactjs.org/
import React from "react";
class ImageWithStatusText extends React.Component {
constructor(props) {
super(props);
this.state = { imageStatus: "loading" };
}
handleImageLoaded() {
this.setState({ imageStatus: "loaded" });
}
handleImageErrored() {
this.setState({ imageStatus: "failed to load" });
}
render() {
return (
<div>
<img
src={this.props.imageUrl}
onLoad={this.handleImageLoaded.bind(this)}
onError={this.handleImageErrored.bind(this)}
/>
{this.state.imageStatus}
</div>
);
}
}
export default ImageWithStatusText;