Javascript 是否有必要在背景中加载动态图像？

假设我有一些HTML标记，一个带有占位符的图像：

在某个时刻，我想通过一些延迟加载策略加载真实图像

我习惯于在显示前在背景中加载真实图像，如下所示：

//在后台加载真实图像以防止FOUC
const img=document.querySelector（“.lazy load”）；
const realSrc=img.dataset.src；
const bgImg=新图像（）；
bgimgsrc=realSrc；
bgImg.onload=（）=>{img.src=realSrc；}

我的印象是，等待浏览器在后台加载内容，然后显示，我会阻止FOUC。但看起来，如果不等待加载，就不会有FOUC：

//不用担心在后台加载图像，因为没有FOUC
const img=document.querySelector（“.lazy load”）；
img.src=img.dataset.src；

---

在将图像添加到文档之前，是否仍然需要在后台加载图像，或者浏览器是否足够聪明，可以在替换旧图像之前等待新图像加载？

我能够起草这个客户机和服务器示例。请参阅以下代码段：

//slow-server.js
//对于任何请求，请等待几秒钟，然后提供图像。
const express=要求（“express”）；
常量路径=要求（“路径”）；
常数fs=要求（“fs”）；
常量app=express（）；
应用程序获取（“*”，（请求，请求）=>{
const file=path.join（uu dirname，“real.png”）；
const stream=fs.createReadStream（文件）；
stream.on（“打开”（）=>{
设置超时（（）=>{
res.set（“内容类型”、“图像/png”）；
流管（res）；
}, 6000);
})
});
app.listen（3001，（）=>console.log（“监听3001”）；

动载荷
img{
边框：1px纯黑；
}
惰性负载
新增
const replaceButton=document.querySelector（“button.replace”）；
replaceButton.addEventListener（“单击”，e=>{
setAttribute（'disabled'，'disabled'）；
replaceButton.innerText='正在加载…'；
const img=document.querySelector（“img”）；
img.src=img.dataset.src；
});
const addButton=document.querySelector（“button.add”）；
addButton.addEventListener（“单击”，e=>{
addButton.setAttribute（'disabled'，'disabled'）；
addButton.innerText='loading…'；
const img=新图像（）；
img.src=”http://localhost:3001/real.png";
文件.正文.附件（img）；
});

单击“替换”按钮时，浏览器在后台加载新的src，然后在从服务器接收到图像后替换旧的src

当点击Add按钮时，我们可以看到一个0宽度/0高度的图像标签被添加到页面中，当收到图像时，图像显示在屏幕上

因此在

Replace

场景中，似乎不需要

img.onload

技巧

---

在

Add

场景中，在将图像添加到文档之前，我们应该等待图像加载。

我能够起草这个客户机和服务器示例。请参阅以下代码段：

//slow-server.js
//对于任何请求，请等待几秒钟，然后提供图像。
const express=要求（“express”）；
常量路径=要求（“路径”）；
常数fs=要求（“fs”）；
常量app=express（）；
应用程序获取（“*”，（请求，请求）=>{
const file=path.join（uu dirname，“real.png”）；
const stream=fs.createReadStream（文件）；
stream.on（“打开”（）=>{
设置超时（（）=>{
res.set（“内容类型”、“图像/png”）；
流管（res）；
}, 6000);
})
});
app.listen（3001，（）=>console.log（“监听3001”）；

动载荷
img{
边框：1px纯黑；
}
惰性负载
新增
const replaceButton=document.querySelector（“button.replace”）；
replaceButton.addEventListener（“单击”，e=>{
setAttribute（'disabled'，'disabled'）；
replaceButton.innerText='正在加载…'；
const img=document.querySelector（“img”）；
img.src=img.dataset.src；
});
const addButton=document.querySelector（“button.add”）；
addButton.addEventListener（“单击”，e=>{
addButton.setAttribute（'disabled'，'disabled'）；
addButton.innerText='loading…'；
const img=新图像（）；
img.src=”http://localhost:3001/real.png";
文件.正文.附件（img）；
});

单击“替换”按钮时，浏览器在后台加载新的src，然后在从服务器接收到图像后替换旧的src

当点击Add按钮时，我们可以看到一个0宽度/0高度的图像标签被添加到页面中，当收到图像时，图像显示在屏幕上

因此在

Replace

场景中，似乎不需要

img.onload

技巧

---

在

Add

场景中，我们应该等待图像加载后再将其添加到文档中。

我现在无法测试它。但您是否确保禁用了浏览器缓存，并启用了连接节流，以测试FOUC是否会在没有预加载的情况下发生？这是一个好问题。我用一个节点服务器做了一个快速POC，我想它解决了这个问题。我现在不能测试它。但您是否确保禁用了浏览器缓存，并启用了连接节流，以测试FOUC是否会在没有预加载的情况下发生？这是一个好问题。我用一个节点服务器做了一个快速POC，我认为它解决了这个问题。