Lazy Loading Logos

Tweaking a method for the lazy loading of images made me think the result could be described as progressively enhancing images. By replacing – with javaScript – a small inline SVG data URI with only embedded text inside on the src-tag with the url of the external image stored in a data-attribute.

Keep in mind this is about loading SVG (vector) images, like in a logo.

The original technique would use a 1px square transparent url-encoded inline image, which would be replaced with the url of the full-sized image on page load with javaScript. The url of the latter image is stored in a data-attribute of that same image:

 <img data-src="assets/img/svg/logo-lll_456x60.svg"
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
      alt="logo for Lazy Loading Logos"
      class="logo" width="456" height="60">

We will need an addLoadEvent function:

/*
 * http://blog.simonwillison.net/post/57956760515/addloadevent
 * http://www.sitepoint.com/closures-and-executing-javascript-on-page-load/
 */
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

The javaScript function will look for elements in the DOM with the data-src attribute, and replace the value for the src attribute with the value stored in the data-src attribute on that same img element.

function loadImg() {
  var imgDefer = document.querySelectorAll('[data-src]')
    for (var i=0; i<imgDefer.length; i++) {
      if(imgDefer[i].getAttribute('data-src')) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
      }
    }
}
addLoadEvent(loadImg);

Now when, for whatever reason, the page takes too long to load on a clients browser, or when javaScript isn’t working, this would result in leaving a blank space at the place where the image should be. But instead of the 1px square transparent PNG, we can use an (url encoded) inline SVG with just a text-attribute inside. In that way, even with javaScript disabled, there will always be visual information on the subject there.

 <img data-src="assets/img/svg/logo-lll_456x60.svg"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
      width='456' height='60'
      viewBox='0 0 456 60'%3E%3Ctext x='16' y='43'
      style='text-anchor:start;font-size:44px;font-family:Calibri,AvenirNextCondensed-DemiBold,Segoe UI,Tahoma,sans-serif;font-weight:bold;letter-spacing:-.4px;fill:rgb(34,34,34)'%3ELazy Loading Logos%3C/text%3E%3C/svg%3E"
      alt="logo for Lazy Loading Logos" class="logo"
      width="456" height="60">

Note the inline style-tag on the text attribute, with values for basic typographic properties applied. The x and y attributes are for the positioning of the text.

Go see the demo:

Resources

This article was also published on Codepen