Replace background image with GIF once loaded

Question

I am facing a bit of an issue and cant seem to find a solution. I have a section tag

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

This simply loads a background image

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

Straightforward enough. Problem is, the gif that is being loaded is 5MB as it has a lot of animation. This is causing the page load to be mega slow. I can't use a standard preloader, to do with requirements.

Instead, I thought I would give something like this a go https://medium.com/front-end-hacking/how-to-optimize-image-loading-on-your-website-855020fb41ae

However, my IDE does not seem to like this code, I think it is ES6? So I essentially trying to do something similar. My thought is to replace the above CSS so it initially displays a static image. And then in the background, the gif can load, and once loaded, replace the static image.

I have seen examples where an Image Object is used, something like this Dynamically replace image src after the page loaded and the image is completely downloaded

I cant however find anything that does this with background images.

How would I go about replacing the static background once the main gif has fully loaded?

Thanks

Answer 1

By giving the section.background-gif a placeholder image(in your case it can be a minified image from the GIF image that you want to load) , and give it a data-src attribute containing the path/link of the desired GIF image, then using JavaScript we'll load the GIF image based on the data-src attribute of the section.background-gif element, and when it loads we'll assign its src attribute to the background-image property of the section.background-gif element.

Here's a runnable snippet to illustrate:

In the snippet, I'm using a placeholder image from placeholder.com website that initially appears as the background, then I load a random GIF image from Google. The snippet may not work as expected due to some restrictions(as the snippets are sandboxed), so try it in your project it should work, just don't forget to replace the image links with yours.

// 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>

Hope I pushed you further.

Answer 2

You can try preloading images. Preloading an image as an object will allow for linked event listeners including "onload". Let's try this....

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';
});
}

Let me know how it goes with a larger image. I'm curious.