Kevin Powell - Community•16mo ago

Lazy Loading

Hello, I was watching this video by Kevin explaining a method on how to lazy load. (https://m.youtube.com/watch?v=mC93zsEsSrg&t=52s&pp=ygUPTGF6eSBsb2FkIGtldmlu) In this video, he uses data-src attribute to hide / reveal images based on the Intersection Observer API in JS. However, after reading more about data attributes: “Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.” https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes Is it bad practice to use a lazy loading method with data tags? Considering crawlers may not recognize the data, would this be problematic in terms of SEO? Let’s say for example, you want to have a marketplace’s directory lazy load, but also index each market offer? Or, does it not matter, considering the page the offer redirects to will be indexed? (Theoretical question)

Kevin Powell

YouTube

How to lazy load images

Continuing my dive into the Intersection Observer API, this week I look at probably the most practical use case for them, lazy loading images! It's relatively easy to do, and we can use the intersection observer's rootMargin to make sure the image loads before it enters the screen. Other videos in this series: Introduction to Intersection Obse...

Using data attributes - Learn web development | MDN

HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

27 Replies

ἔρως•16mo ago

now-a-days, a better method is to use the loading="lazy" attribute

MattOP•16mo ago

Does this attribute automatically work depending on viewport?

ἔρως•16mo ago

yes

MattOP•16mo ago

Interesting, very simplified solution compared to what I was looking at

ἔρως•16mo ago

keep in mind that this doesn't work in older browsers

MattOP•16mo ago

Just out of curiosity, with that attribute, is it possible to lazy load in order? For example, load Box #1, then Box #2, then Box #3?

ἔρως•16mo ago

https://caniuse.com/loading-lazy-attr <-- it has pretty good support no it loads in whatever order i would assume it loads in dom order, but that's just a guess and i doubt it will ever be consistent

MattOP•16mo ago

okay, so assuming this row took up the entire viewport, it would load all three elements at the same time

ἔρως•16mo ago

it would start loading them at roughly the same time, depending on the number of available connections the browser has, if you use http 1.0 and 1.1 the keyword is start it will end loading whenever it ends

MattOP•16mo ago

okay cool makes sense How would you recommend achieving this solution?

ἔρως•16mo ago

don't seriously, don't bother

MattOP•16mo ago

Why not?

ἔρως•16mo ago

this is one reason

MattOP•16mo ago

For ecommerce, it looks pretty clean when stuff gradually loads

ἔρως•16mo ago

animate it in css instead or in javascript

MattOP•16mo ago

Yeah. The video uses Observer API. I'm assuming a solution where you check whats in viewport, then loop through elements and apply css transition to each element with a delay could be a method at gradually loading

ἔρως•16mo ago

the images should be already loaded at that point

MattOP•16mo ago

Just curious how to handle the actual images. The data-src attribute makes sense, just doesn't seem SEO friendly

ἔρως•16mo ago

it doesn't matter the alt attribute is what matters for seo

MattOP•16mo ago

Okay

ἔρως•16mo ago

https://pagespeedchecklist.com/lazy-load-images <-- i did find this, which is an interesting take

Native Lazy Image Loading With JavaScript Fallback

Lazy load images to reduce initial-load page weight with the browser-native loading="lazy" attribute and a simple JavaScript fallback.

MattOP•16mo ago

In the JS example for fallback, how does it detect if loading="lazy" is supported by browser or not?

var lazyimages = document.querySelectorAll('img[data-src]');

// IntersectionObserver IS supported AND native lazy loading is NOT (fallback for loading="lazy")
if ('IntersectionObserver' in window && !('loading' in HTMLImageElement.prototype)) {
    var imageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) { // image enters viewport
                var image = entry.target;
                image.src = image.dataset.src; // replace src value with data-src value
                image.removeAttribute('data-src'); // remove data-src attribute 
                imageObserver.unobserve(image); // stop observing image
            }
        });
    }, {rootMargin:'500px 0px'}); // 500px buffer to load images just before they're visible

    lazyimages.forEach(function(image) { // run for each image
        imageObserver.observe(image);
    });
}

// native lazy loading IS supported OR IntersectionObserver is NOT (fallback not used)
else {
    for (var i = 0; i < lazyimages.length; i++) { // run for each image
        lazyimages[i].src = lazyimages[i].dataset.src; // replace src value with data-src value
        lazyimages[i].removeAttribute('data-src'); // remove data-src attribute 
    }
}

var lazyimages = document.querySelectorAll('img[data-src]');

// IntersectionObserver IS supported AND native lazy loading is NOT (fallback for loading="lazy")
if ('IntersectionObserver' in window && !('loading' in HTMLImageElement.prototype)) {
    var imageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) { // image enters viewport
                var image = entry.target;
                image.src = image.dataset.src; // replace src value with data-src value
                image.removeAttribute('data-src'); // remove data-src attribute 
                imageObserver.unobserve(image); // stop observing image
            }
        });
    }, {rootMargin:'500px 0px'}); // 500px buffer to load images just before they're visible

    lazyimages.forEach(function(image) { // run for each image
        imageObserver.observe(image);
    });
}

// native lazy loading IS supported OR IntersectionObserver is NOT (fallback not used)
else {
    for (var i = 0; i < lazyimages.length; i++) { // run for each image
        lazyimages[i].src = lazyimages[i].dataset.src; // replace src value with data-src value
        lazyimages[i].removeAttribute('data-src'); // remove data-src attribute 
    }
}

That's !('loading' in HTMLImageElement.prototype)) ?

ἔρως•16mo ago

basically, yes if the 'loading' key doesn't exist in the HTMLImageElement prototype, then the browser doesn't have support for it

MattOP•16mo ago

Just to make sure I'm understanding. If a browser doesn't support an attribute, such as loading, it will not be defined in the markup if you were to inspect page code? hence checking to see if loading is a property of the image

ἔρως•16mo ago

no, it won't be defined in whatever that feature is it's very generic but the idea is simple if a browser has the 'loading' key in the prototype, then that means the browser supports the loading property

MattOP•16mo ago

Okay that makes sense https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement Under browser compatibility, those are all of the properties that would be potentially returned if you console.log(HTMLImageElement.prototype)? Sorry for the additional question. I haven't seen .prototype before

ἔρως•16mo ago

if the browser supports it, it will be available

Gaming

Programming

Lazy Loading