javascript lazy loading the progressive enhancement way?

Question

I'm building a website for a gallery owner that has a lot of images per webpage. Therefore I want to lazy load the images on the webpage, making the initial load less heavy. However, I would like to implement this in a "progressive enhancement" way.

I've found a lot of lazy loading methods but they all require fiddling with the html code in such a way that the webpage would be useless with javascript turned off. (eg. the src attribute of the img tags remains unset until the images is lazy loaded).

To implement a lazy loading method progressivly I think one would need the following:

1. prevent the browser from fetching the images, even though thers are on the page, but only do this when javascript is on (so on non-javascript browsers, the images still load as normal). This should be done without altering the html.
2. save the src attribute in a data-src attribute
3. sequentually load the images when scrolling down

Of these three steps the first one seems the hardest one. Even this stackoverflow discussion did not provide an answer that doesn't ruin progressive enhancement.

Has anyone got any ideas?

Whirl

Answer 1

Since none has come up with an answer, I'll post what I found a reasonable solution.

This problem boils down to the following: while we want to prevent the browser from downloading the images when javascript is turned on, we must be sure the images are downloaded when javascript is turned off or not available.

It is hard to consistently use javascript to stop loading images on a page when they are in the "normal" format:

<img src="path/to/image.jpg"></img>

To stop the images from downloading we'd have to remove their src attributes, but in order to do this, the DOM should be loaded already. With the optimisations a lot of browsers have nowadays it is hard to guarantee that the images aren't downloading already.

On top of that, we certainly want to prevent interrupting images that are already downloading, because this would simply be a waste.

Therefore, I choose to use the following solution:

<img data-src="path/to/image.jpg" class="lazy"></img>
<noscript>
    <img  src="path/to/image.jpg"></img>
</noscript>

Notice how the images outside of the noscript tag have no src but a data-src attribute instead. This can be used by a lazyloading script to load the images one by one for instance.

Only when javascript is not available, will the images inside the noscript block be visible, so there's no need to load the .lazy images (and no way to do this, since javascript is unavailable).

We do need to hide the images though:

<noscript>
    <style>
        .lazy {
            display: none;
        }
    </style>
 </noscript>

Like the img tags inside the noscript block, this style block will only be visible to the browser when javascript is unavailable.

On a related note: I thought I could reduce the html size by not putting a src or data-src attributes on the lazy images at all. This would be nice because it eliminates the redundant url from the page, saving us some bandwidth.

I thought I could pluck the src attribute out of the noscript block using javascript anyways. However, this is impossible: javascript has no access to the contents of a noscript block. The above scheme is therefore the most efficient I could come up with.

Whirl

I know this is a bit old reply, but currently this does not work for me as browser loads all images inside noscript tag when JS is enabled thus contradicting the whole idea of lazy loading. Is there something that I am missing here? – Kistna

@Kistna I'm not sure how I worked around that back then, but I'd recommend you just use the loading=lazy attribute on images which is supported by most browsers. – Whirl

Answer 2

Not specifying a src attribute is invalid HTML, which is unfortunately how most lazy image loaders work.

I am working on a lazyloader that uses valid html markup, github link: https://github.com/tvler/lazy-progressive-enhancement

A lazyloaded image would be declared by wrapping it in a noscript element:

<noscript><img alt="hello!" src="..."></noscript>

and the final outputted html would be

<img alt="hello!" src="...">.

You can view the whole project on github, which deals with batch loading, event hooking & more, but here's the basic functionality at the scope of a single noscript image:

var noscript = document.querySelector('noscript'), img;
(img = document.createElement('div')).innerHTML = noscript.textContent;
noscript.parentElement.replaceChild(img.firstChild, noscript);

Mimeograph