jesvs/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Preload background image</title>
  <style media="screen">
    * {
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
      margin: 0;
    }
    /* fading magic */
    .image-preload {
      transition: opacity 800ms;
    }
    .background pre:before {
      content: 'jesvs@workstation: ~/CSS Background image preload with fader';
      position: absolute;
      width: 80vw;
      height: 32px;
      background: linear-gradient(#ebebeb, #d4d4d4);
      border-top: 1px solid #f6f6f6;
      border-bottom: 1px solid #b3b3b3;
      top: -34px;
      color: #666;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14px;
      text-align: center;
      line-height: 32px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .background {
      background: url(Marzipans-preload.jpg) no-repeat center;
      background-size: cover;
      height: 100%;
      width: 100%;
    }
    .background pre {
      position: absolute;
      margin: 0;
      width: 80vw;
      left: 50%;
      top: 50%;
      font-size: 16px;
      background: rgba(0,0,0,0.8);
      color: #e0e0e0;
      transform: translate(-50%, -50%);
      box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.9);
      font-family: PT Mono, Menlo, Monaco, monospace;
    }
    .background pre .content {
      padding: 1vw;
    }
    .background pre strong {
      color: white;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <div class="background image-preload">
    <pre><div class='content'><strong>CSS BACKGROUND IMAGE PRELOAD WITH FADER</strong>

Use ImageMagick® to create the preload image:

$ convert -quality 50 -resize 10% -blur 0x10 background.jpg background-preload.jpg
$ ls -lh background*.jpg

554B  background-preload.jpg
487K  background.jpg</div></pre>
  </div>

  <script>
    function getStyle(element, property) {
      return window
             .getComputedStyle(element)
             .getPropertyValue(property);
    }

    function createPlaceholder(src, backgroundImage, index, opacity) {
      let placeholder = document.createElement('div');
      // copy styles
      placeholder.style.cssText = window.getComputedStyle(src, "").cssText;
      Object.assign(placeholder.style, {
        position: 'absolute',
        backgroundImage: `url(${backgroundImage})`,
        opacity: opacity,
        zIndex: index
      });
      return document.querySelector('body').insertBefore(placeholder, src);
    }

    let preloadingElements = document.querySelectorAll('.image-preload');
    preloadingElements.forEach(preloadElement =>
    {
      let imgPreloader = new Image(),
          imgPreload = window.getComputedStyle(preloadElement)
                       .getPropertyValue('background-image')
                       .match(/['"](http.+)["']/)[1],
          imgFinal = imgPreload.replace('-preload', ''),
          preloadPlaceholder = createPlaceholder(preloadElement, imgPreload, -2, 1),
          finalPlaceholder = createPlaceholder(preloadElement, imgFinal, -1, 0);

      // remove backgroundImage from preloadElement
      preloadElement.style.backgroundImage = 'url()';

      // begin loading final image
      imgPreloader.src = imgFinal;

      // call when final image finishes loading
      imgPreloader.onload = () => {
        // fade out preloading image
        preloadPlaceholder.style.opacity = 0;
        // fade in final image
        finalPlaceholder.style.opacity = 1;
      };
    });
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Preload background image</title>
	<style media="screen">
	* {
	box-sizing: border-box;
	}
	html, body {
	height: 100%;
	margin: 0;
	}
	/* fading magic */
	.image-preload {
	transition: opacity 800ms;
	}
	.background pre:before {
	content: 'jesvs@workstation: ~/CSS Background image preload with fader';
	position: absolute;
	width: 80vw;
	height: 32px;
	background: linear-gradient(#ebebeb, #d4d4d4);
	border-top: 1px solid #f6f6f6;
	border-bottom: 1px solid #b3b3b3;
	top: -34px;
	color: #666;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	text-align: center;
	line-height: 32px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}
	.background {
	background: url(Marzipans-preload.jpg) no-repeat center;
	background-size: cover;
	height: 100%;
	width: 100%;
	}
	.background pre {
	position: absolute;
	margin: 0;
	width: 80vw;
	left: 50%;
	top: 50%;
	font-size: 16px;
	background: rgba(0,0,0,0.8);
	color: #e0e0e0;
	transform: translate(-50%, -50%);
	box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.9);
	font-family: PT Mono, Menlo, Monaco, monospace;
	}
	.background pre .content {
	padding: 1vw;
	}
	.background pre strong {
	color: white;
	font-weight: normal;
	}
	</style>
	</head>
	<body>
	<div class="background image-preload">
	<pre><div class='content'><strong>CSS BACKGROUND IMAGE PRELOAD WITH FADER</strong>

	Use ImageMagick® to create the preload image:

	$ convert -quality 50 -resize 10% -blur 0x10 background.jpg background-preload.jpg
	$ ls -lh background*.jpg

	554B background-preload.jpg
	487K background.jpg</div></pre>
	</div>

	<script>
	function getStyle(element, property) {
	return window
	.getComputedStyle(element)
	.getPropertyValue(property);
	}

	function createPlaceholder(src, backgroundImage, index, opacity) {
	let placeholder = document.createElement('div');
	// copy styles
	placeholder.style.cssText = window.getComputedStyle(src, "").cssText;
	Object.assign(placeholder.style, {
	position: 'absolute',
	backgroundImage: `url(${backgroundImage})`,
	opacity: opacity,
	zIndex: index
	});
	return document.querySelector('body').insertBefore(placeholder, src);
	}

	let preloadingElements = document.querySelectorAll('.image-preload');
	preloadingElements.forEach(preloadElement =>
	{
	let imgPreloader = new Image(),
	imgPreload = window.getComputedStyle(preloadElement)
	.getPropertyValue('background-image')
	.match(/['"](http.+)["']/)[1],
	imgFinal = imgPreload.replace('-preload', ''),
	preloadPlaceholder = createPlaceholder(preloadElement, imgPreload, -2, 1),
	finalPlaceholder = createPlaceholder(preloadElement, imgFinal, -1, 0);

	// remove backgroundImage from preloadElement
	preloadElement.style.backgroundImage = 'url()';

	// begin loading final image
	imgPreloader.src = imgFinal;

	// call when final image finishes loading
	imgPreloader.onload = () => {
	// fade out preloading image
	preloadPlaceholder.style.opacity = 0;
	// fade in final image
	finalPlaceholder.style.opacity = 1;
	};
	});
	</script>

	</body>
	</html>