alt attribute on lazy-loaded <picture> tags

For the sake of accessibility, it would be cleaner if lazy-loaded images using <picture>tags could “inherit” their altattribute from a data-X attribute on picture tag.

On our project we easily managed that by overloading the loadfunction of lozad (and using data-lazy-img-alt attribute). It could be nice if it could be default (a11y is important).

There can be two ways :

• make this functionnality by default
• write a documentation paragraph explaining how to overload the loadfunction.

Attempting to do a pull-request in this direction, I was confronted to the problem of test coverage (see #93)

[0gust1]

@robots4life : I should have said override instead of overload 😃

Basically, you can easily customize the behavior of lozad, and use your own loading function (code from documentation) :

lozad('.lozad', {
    load: function(el) {
        console.log('loading element');

        // Custom implementation to load an element
        // e.g. el.src = el.getAttribute('data-src');
    }
});

What we have done in our project : we made our own loading function, based on the default one of lozad :

// loading function definition 
function loadFun(el) {
  const isIE = document.documentMode;

  if (el.nodeName.toLowerCase() === 'picture') {
    const imgTag = document.createElement('img');

    //IE management
    if (isIE && el.getAttribute('data-iesrc')) {
      imgTag.src = el.getAttribute('data-iesrc');
    }

    // apply alt attribute to the image if corresponding data attribute
    // is found on the <picture> tag
    if (el.getAttribute('data-lazy-img-alt')) {
      imgTag.alt = el.getAttribute('data-lazy-img-alt');
    }

    // apply css class to the image if corresponding data attribute
    // is found on the <picture> tag
    if (el.getAttribute('data-lazy-img-class')) {
      imgTag.className = el.getAttribute('data-lazy-img-class'); // we use classname because the attribute could contain several classnames
    }

    // NRT management
    if (el.getAttribute('data-tnr')) {
      imgTag.dataset = el.getAttribute('data-tnr');
    }

    el.appendChild(imgTag);
  }

  // <img> and <iframe> case
  if (el.getAttribute('data-src')) {
    el.src = el.getAttribute('data-src');
  }

  // <img>
  if (el.getAttribute('data-srcset')) {
    el.srcset = el.getAttribute('data-srcset');
  }

  // CSS background case
  if (el.getAttribute('data-background-image')) {
    el.style.backgroundImage = `url(${el.getAttribute(
      'data-background-image'
    )})`;
  }
}
// lozad initialisation
lozad('.js-lazy', {
    load: loadFun
});

[ApoorvSaxena]

feature has been released in v1.5.0 of Lozad and added in README as well, thanks everyone for their contributions on this thread