Skip to content

Frequently Asked Questions

Jump to bottom
Apoorv Saxena edited this page Jul 25, 2020 · 7 revisions

Index:

Does lazy loading of image impacts SEO?

Answer

Not sure, while Google mentions that it executes JavaScript while indexing a webpage via it's crawlers, several individuals have experienced a decrease in their webpage ranking when the site loads content via JavaScript. To avoid this situation and to tackle the worst case scenario which is when JavaScript is disabled, read the following answer mentioning the use of <noscript> element to share the actual source of images to crawlers.

How to load images normally when JavaScript is disabled?

Solution

Use noscript element in HTML to load elements normally when JavaScript is disabled in browser.

<!-- LazyLoaded using JS -->
<img class="lozad" data-src="image.png" />

<!-- Loaded when JS is disabled -->
<noscript><img src="image.png" /></noscript>

Is it possible to check if elements have been lazy loaded by Lozad?

Solution

Yes, Lozad.js adds data-loaded="true" attribute to the elements that have been lazy loaded.

<img class="lozad" data-src="image.png" src="image.png" data-loaded="true" />

How to support browsers in which IntersectionObserver is not supported?

Solution

IntersectionObsever API is available in latest version of Chrome, Firefox, IE Edge, Opera etc. To use Lozad.js in browsers where IntersectionObserver API is not supported as mentioned here, use it's polyfill before loading Lozad library.

<!-- IntersectionObserver Polyfill -->
<script src="https://raw.githubusercontent.com/w3c/IntersectionObserver/master/polyfill/intersection-observer.js"></script>

<!-- Lozad.js -->
<script src="https://cdn.jsdelivr.net/npm/lozad"></script>
Loading this polyfill asynchronously on need (when Intersection Observer support is not available)
<script type="text/javascript">
if (!('IntersectionObserver' in window)) {
    var script = document.createElement("script");
    script.src = "https://raw.githubusercontent.com/w3c/IntersectionObserver/master/polyfill/intersection-observer.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

<!-- Lozad.js -->
<script src="https://cdn.jsdelivr.net/npm/lozad"></script>

Safari polyfill bug causing lozad to load images outside the viewport

Solution

The root cause is described in w3c/IntersectionObserver#257. It's because the root box that the polyfill creates is too big. The fix is to either set the html div's height to 100% or to set doctype.

Clone this wiki locally