Lazysizes and old webcomponents.js polyfills (Polymer 1)

[relnofollow]

I found quite an interesting issue regarding old webcomponents.js polyfills and lazysizes library.
The polyfill overwrites getElementsByClassName method in a way that it returns a static NodeList instead of a live HTMLCollection. This causing infinite number of requests for loading images with lazyload class.

To fix it I used following code:

if (window.lazySizes &&
    document.getElementsByClassName(window.lazySizes.cfg.lazyClass) instanceof NodeList) {

    $(document).on('lazyloaded', function () {
        window.lazySizes.elements = document.getElementsByClassName(window.lazySizes.cfg.lazyClass);
    });
}

[aFarkas]

@zhdanova
I made the elements property indeed public to allow fixing this bug and also including search for attributes (i.e.: [data-lazyload]) instead of classes.

A probably better way is to use a getter though.

My untested code would look similar to this:

import lazysizes from 'lazysizes';

Object.defineProperty(lazySizes, 'elements', {
	get() {
		return document.querySelectorAll(`.${lazySizes.cfg.lazyClass}`);
	},
	configurable: true,
	enumerable: true,
});