Dominant Color Lazy Loading

dominant-color-lazy-loading.markdown

Dominant Color Lazy Loading

Inspired by Medium's website.

A Pen by ComeOnCreative on CodePen.

License.

index.pug

.background(data-image="WpdHCafYSWjaguKSxPOjdbT1a/H0MfAAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ")
  img.lazy(src="https://lh3.googleusercontent.com/-6UtNFOzr6Rk/V2pO8a32QNI/AAAAAAAAHXE/tc8SACAEqWo_IM0N85rUHlc-ThVs65LaQ/w2048-h1280/sierra-2.jpg" )

.background(data-image="WeXlGlt8u7wc40QUtIYHNRR0wrG7TZAAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ")
  img.lazy(src="http://ihdwallpapers.com/walls/2015/10/12/os_x_el_capitan_desktop-wide.jpg" )

.background( data-image="X2xZnCkYJ4YXKqj3xTUVpKT15VjEr+AAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ")
  img.lazy(src="https://www.hdwallpapers.net/wallpapers/yosemite-wallpaper-for-2880x1800-60-798.jpg")

script.js

$('.background').each(function() {
  var $b64 = $(this).data("image");
  $(this).css("background", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAMAAACqqpYoAAAAElBMVE" + $b64 + "AAAABJRU5ErkJggg==) center/cover no-repeat");
});

$('.lazy').each(function() {
  var $object = $(this),
    $parent = $object.parent();
  $object.on('load', function() {
    $object.addClass('loaded');
    $parent.removeAttr("data-image")
    setTimeout(function() {
      $parent.removeAttr("style");
    }, 2000);
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

.background {
  $size: 80vmin;
  width: $size;
  height: calc(#{$size} / 14 * 9);
  margin: 56px auto;
  box-shadow: 0 10px 75px -16px #000;
  img.lazy{
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 1s;
    &.loaded {
      opacity: 1;
    }
  }
}