web/_javascript/modules/components/img-loading.js

32 lines
828 B
JavaScript

/**
* Setting up image lazy loading and LQIP switching
*/
export function loadImg() {
const $images = $('main img[loading="lazy"]');
const $lqip = $('main img[data-lqip="true"]');
if ($images.length > 0) {
$images.on('load', function () {
/* Stop shimmer when image loaded */
$(this).parent().removeClass('shimmer');
});
$images.each(function () {
/* Images loaded from the browser cache do not trigger the 'load' event */
if ($(this).prop('complete')) {
$(this).parent().removeClass('shimmer');
}
});
}
if ($lqip.length > 0) {
$lqip.each(function () {
/* Switch LQIP with real image url */
const dataSrc = $(this).attr('data-src');
$(this).attr('src', encodeURI(dataSrc));
$(this).removeAttr('data-src data-lqip');
});
}
}