JS disabled lazy load

[aaronstezycki]

When Javascript is disabled, lazy loaded images do not load at all, if a src has not been specified. Using your example from the demos would result in an img with no src if javascript has been disabled.

What effect, would adding the src attribute to be the same as the data-lazy? e.g... <img src="image1.jpg" data-lazy="image1.jpg"/> <img src="image2.jpg" data-lazy="image2.jpg"/> So this works... however does it load/call 2 images when JS is enabled?

[tomaszpoliszuk]

Yes - if you put src there's no point of using lazyload. If you care for users without js (which is great) use noscript tag.

[aaronstezycki]

So using a separate noscript tag, would still leave the original image broken.

I'd much prefer the ability to set data-lazy without an attached src... using the normal src to lazy load the image in... that way when javascript is turned off... the image is still loaded using src.

eg. JS turned on <img data-lazy src="image1.jpg"/>

Meaning when JS is turned on it uses src to lazy load the image, when JS is turned off... it simply ignores the data-lazy.

[tomaszpoliszuk]

No. Please learn how browsers react for src attribute then you'll see why your proposal is bad. this is what you should do:

div class="slick-slider"
    div
        img data-lazy="" alt=""
        noscript
            img src="" alt=""
        /noscript
    /div
/div

[aaronstezycki]

Does this method not leave a broken image in the DOM? ... I can't help think this isn't the best method either.

There's very little on the internet on 'how browsers react to the src attribute'.

[gausarts]

Does this method not leave a broken image in the DOM?

Perhaps you want to hide the data-lazy image for non-JS users with CSS: .no-js img[data-lazy] { display: none; }

Add the no-js class into html element, and remove it when JS enabled.