Question

我遇到了一个问题，似乎找不到解决方法。我有一个分区标签

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

这只是加载背景图片

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

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

相反，我想我会尝试一下https://medium.com/front-end-hacking/how-to-optimize-image-loading-on-your-website-855020fb41ae

但是，我的IDE似乎不喜欢此代码，我认为它是ES6？所以我本质上是想做类似的事情。我的想法是替换上面的CSS，以使其最初显示静态图像。然后在后台加载gif，加载后替换静态图片。

我已经看到了使用图像对象的示例，例如Dynamically replace image src after the page loaded and the image is completely downloaded

但是我找不到任何与背景图像有关的东西。

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

谢谢

Answer 1

通过为section.background-gif提供一个占位符图像（在您的情况下，它可以是您要加载的GIF图像中的缩小图像），并为其提供一个data-src属性，其中包含所需的GIF图像的路径/链接，然后使用JavaScript基于GIF元素的data-src属性加载section.background-gif图像，然后在加载时，将其src属性分配给background-image元素的section.background-gif属性。

下面是一个可运行的代码段，用于说明：

在摘要中，我使用的是placeholder.com网站上的占位符图像，该图像最初显示为背景，然后从Google加载随机的GIF图像。由于某些限制（由于片段已沙盒化），该片段可能无法按预期方式工作，因此请在您的项目中尝试该片段，该片段应该可以正常工作，只是不要忘了用您的图像替换链接。

// referencing the section element, and creating a new Image object.
var section = document.getElementsByClassName('background-gif')[0],
    img = new Image();
// assign the data-src to the img variable src.
img.src = section.getAttribute('data-src');
// adding a 'load' event listener in which will change the section's background image when the img is loaded.
img.addEventListener('load', function() {
  // the img is loaded, assign its src attribute to the section.
  section.style.backgroundImage = 'url("' + this.src + '"';
  // just for testing, not required.
  console.log('The image has been loaded.');
});

section {
  /* just for the demo */
  height: 100vh;
}
.background-gif {
  /* change the url to your image link */
  background: url("https://via.placeholder.com/350x350") no-repeat top;
  background-size: 100%;
}

<!-- don't forget the data-src to point to the large GIF image you want to set as a background -->
<section class="background-gif" data-src="http://cosmicweb.uchicago.edu/images/mov/s02_0.gif"></section>

希望我进一步推动了你。

Answer 2

您可以尝试预加载图像。将图像预加载为对象将允许包括“ onload”在内的链接事件侦听器。让我们尝试一下...。

window.addEventListener('load',init);

function init(){
var image = new Image();
image.src = 'https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&auto=format&fit=crop&w=700&q=60';

image.addEventListener('load',function(){
alert('image loaded');
document.body.style.background = 'url('+image.src+') no-repeat top';
});
}

让我知道如何放大图像。我很好奇。

加载后将背景图片替换为GIF

2 个答案: