Javascript 加载后用GIF替换背景图像

我面临着一点问题，似乎找不到解决办法。我有一个分区标签

<section class="background-gif"></section>

很简单。问题是，正在加载的gif是5MB，因为它有很多动画。这导致页面加载速度非常慢。我不能使用标准的预加载程序来满足需求

相反，我想我应该试试这样的东西

然而，我的IDE似乎不喜欢这段代码，我认为它是ES6？所以我基本上也在做类似的事情。我的想法是替换上面的CSS，使其最初显示一个静态图像。然后在后台，gif可以加载，一旦加载，就会替换静态图像

我见过使用图像对象的例子，类似这样的

然而，我找不到任何与背景图像相关的东西

一旦主gif完全加载，我将如何替换静态背景

---

谢谢

您可以尝试预加载图像。将图像作为对象预加载将允许链接事件侦听器，包括“onload”。让我们试试这个

window.addEventListener（'load'，init）；
函数init（）{
var image=新图像（）；
image.src=https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyjhcbfawqiojeymdd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&auto=format&fit=crop&w=700&q=60'；
image.addEventListener（'load'，function（））{
警报（“图像已加载”）；
document.body.style.background='url（'+image.src+'）无重复顶部'；
});
}

为

部分.background gif

提供一个占位符图像（在您的情况下，它可以是要加载的

gif

图像中的缩小图像），并为其提供一个

data src

属性，其中包含所需

gif

图像的路径/链接，然后使用

JavaScript

我们将基于

section.background GIF

元素的

data src

属性加载

GIF

图像，当它加载时，我们将其

src

属性分配给

section.background GIF

元素的

background image

属性

下面是一个可运行的片段来说明：

在代码片段中，我使用的是placeholder.com网站上的占位符图像，最初显示为背景，然后从Google加载一个随机的

GIF

图像。由于某些限制，代码段可能无法按预期工作（因为代码段是沙盒），因此请在项目中尝试它。它应该可以工作，只是不要忘记用您的图像链接替换图像链接

//引用section元素并创建新的图像对象。
var section=document.getElementsByClassName（'background-gif'）[0]，
img=新图像（）；
//将数据src分配给img变量src。
img.src=section.getAttribute（'data-src'）；
//添加一个“加载”事件监听器，在其中加载img时将更改节的背景图像。
img.addEventListener（'load'，function（）{
//加载img后，将其src属性分配给该节。
section.style.backgroundImage='url（'+this.src+''”；
//仅用于测试，不需要。
log（'映像已加载'）；
})；

部分{
/*只是为了演示*/
高度：100vh；
}
.gif背景{
/*更改图像链接的url*/
背景：url（“https://via.placeholder.com/350x350）无重复顶部；
背景大小：100%；
}

加载图像时，不要使用

someImg.src='url'；

您可以使用

theSection.style.backgroundImage=“url（../images/image.gif）”

这个问题特别是关于将加载的图像设置为

背景图像

，而不是将其显示为

，这是OP知道的。@ChrisG注意到，我忘记了这一部分。谢谢你指出。这太棒了，谢谢。有一个问题，它在IE11中似乎不起作用，只显示静态ima这里有什么东西阻止它工作吗？ThanksIt似乎不支持我认为的图像对象。

.background-gif {
    background: url(../images/image.gif) no-repeat top;
    background-size: 100%;
}