Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

alt attribute on lazy-loaded <picture> tags

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

0gust1commented, Jun 15, 2018

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


  // <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')) { = `url(${el.getAttribute(
// lozad initialisation
lozad('.js-lazy', {
    load: loadFun
ApoorvSaxenacommented, Jul 16, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Missing alt tag for lazy-loading images -
Hello, I'm using the image lazy loading feature, which automatically replaces images with an img that has a data string as the src....
Read more >
Alt tag for src='blank.gif' on lazy load images | SEO Forum - Moz
I am loading 20 images that are in the viewport and a bit below. The next 80 images I want to ... Alt...
Read more >
How to hide image's alt tag when you reload the page with ...
I am using lazyload to display my images in my website (with data-src instead of src). However, when you reload the page, you...
Read more >
Browser-level image lazy loading for the web -
This post covers the loading attribute and how it can be used to control the loading of images.
Read more >
Lazy Loading Images – The Complete Guide -
Which Images can be Lazy Loaded? Lazy Loading Techniques for images. The general concept of lazy loading images in <img> tag; Trigger image...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found