获取HTML的加载数据

Question

所以我正在制作一个简单的口袋妖怪应用程序，前端调用fetch从PokeAPI获取口袋妖怪并显示它，但当加载口袋妖怪时，你可以看到fetch信息以不同的速率加载。例如，pokemon加载，名称加载，背景加载，类型加载。有没有办法让HTML一次填满所有内容？

这就是我的Javascript获取函数的样子，另外还有这个应用程序，这样你就可以看到信息是如何缓慢加载的/不是一次加载的：https://bui-pokemon.herokuapp.com/

pokeButton.addEventListener('click', (e)=> {
e.preventDefault();
const pokeNameSearch = pokeSearch.value.toLowerCase();
fetch(`https://pokeapi.co/api/v2/pokemon/${pokeNameSearch}`)
.then((response) => response.json())
.then(data => {
if(pokeCard.classList.value === 'poke_card'){
pokeCard.classList.add('border');
};
//If a pokemon was normal / flying type then flying should be shown in the background isntead of normal
//because flying type is more of a defining characteristic of that pokemon rather than normal
if(data.types.length > 1 && data.types[0].type.name === "normal" && data.types[1].type.name === "flying"){
pokeCard.className = `poke_card border ${data.types[1].type.name}_background`
} else {
pokeCard.className = `poke_card border ${data.types[0].type.name}_background`;
}

pokeImg.src = data.sprites.front_default;
pokeName.innerHTML = data.name;
// Fill in Pokemon Type
pokeTypeIcon1.src = "";
pokeTypeIcon2.src = "";
pokeTypeIcon1.className = '';
pokeTypeIcon2.className = '';
pokeTypeIcon2.style.display = "none";
pokeType.innerHTML = `${data.types[0].type.name}`;
pokeNumDisplay.innerHTML = `#${fillInZero(data.id.toString())}`
pokeTypeIcon1.src = `img/icons/${data.types[0].type.name}.svg`
pokeTypeIcon1.className = `type_icon_1 ${data.types[0].type.name}`

if(data.types.length > 1){
pokeType.innerHTML += `/${data.types[1].type.name}`

pokeTypeIcon2.src = `img/icons/${data.types[1].type.name}.svg`
pokeTypeIcon2.style.display = "inline-block";
pokeTypeIcon2.className = `type_icon_2 ${data.types[1].type.name}`

} else {
pokeType.innerHTML = `${data.types[0].type.name}`
}
})

Answer 1

似乎是加载字体和图像导致了问题。

您可以做的是在每个图像上侦听load事件并转换不透明度。然后，使用document.fonts.ready并转换颜色：

const container = document.querySelector(".container");
const background = document.getElementById("background")
const imgOne = document.getElementById("img-one")
const imgTwo = document.getElementById("img-two")
const fadeIn = (el) => {
el.addEventListener("load", () => el.style.opacity = "1")
}
document.fonts.ready.then(() => container.style.color = "#fff")
fadeIn(background)
fadeIn(imgOne)
fadeIn(imgTwo)
background.src = "https://ak.picdn.net/shutterstock/videos/9589454/thumb/2.jpg"
imgOne.src = "https://toppng.com/public/uploads/thumbnail/ikachu-8-bits-8-bit-pokemon-grid-11563233054e4sqfqyl2l.png"
imgTwo.src = "https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/lightning-icon.png"

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
background: #43464b;
font-family: "Press Start 2P", Arial, Helvetica, sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
margin: 0 auto;
width: 200px;
height: 300px;
color: transparent;
overflow: hidden;
transition: color 0.25s;
}
.container>*:not(#background) {
z-index: 1;
}
img {
opacity: 0;
transition: opacity 0.25s;
}
#background {
position: absolute;
top: 0;
left: 0;
}
#img-one,
#img-two {
height: 80px;
}

<div class="container">
<img id="background" />
<img id="img-one" />
<p>#25 Pikachu</p>
<img id="img-two" />
<p>Electric</p>
</div>

---

然而，如果一个东西的加载时间比另一个长，那么这种方式仍然可能是不均匀的。

另一种解决方案是在加载后将值推送到数组，并在设置容器的不透明度之前检查数组的长度：

const container = document.querySelector(".container");
const background = document.getElementById("background")
const imgOne = document.getElementById("img-one")
const imgTwo = document.getElementById("img-two")
const loaded = []
const setLoadState = (el) => {
loaded.push(el)
if (loaded.length === 4)
container.style.opacity = "1"
}
const imgLoad = (img) => {
img.addEventListener("load", () => setLoadState(img.id))
}
document.fonts.ready.then(() => setLoadState('font'))
imgLoad(background)
imgLoad(imgOne)
imgLoad(imgTwo)
background.src = "https://ak.picdn.net/shutterstock/videos/9589454/thumb/2.jpg"
imgOne.src = "https://toppng.com/public/uploads/thumbnail/ikachu-8-bits-8-bit-pokemon-grid-11563233054e4sqfqyl2l.png"
imgTwo.src = "https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/lightning-icon.png"

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
background: #43464b;
font-family: "Press Start 2P", Arial, Helvetica, sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
margin: 0 auto;
width: 200px;
height: 300px;
color: #fff;
overflow: hidden;
opacity: 0;
transition: opacity 0.25s;
}
.container>*:not(#background) {
z-index: 1;
}
#background {
position: absolute;
top: 0;
left: 0;
}
#img-one,
#img-two {
height: 80px;
}

<div class="container">
<img id="background" />
<img id="img-one" />
<p>#25 Pikachu</p>
<img id="img-two" />
<p>Electric</p>
</div>