Something went wrong. Try again.
Joseph Hale's Technical Blog
Something went wrong. Try again.
1.3 kB · 61 lines
JavaScript
at content
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162/** * Setting up image lazy loading and LQIP switching */
const ATTR_DATA_SRC = 'data-src';const ATTR_DATA_LQIP = 'data-lqip';
const cover = { SHIMMER: 'shimmer', BLUR: 'blur'};
function removeCover(clzss) { $(this).parent().removeClass(clzss);}
function handleImage() { if (!this.complete) { return; }
if (this.hasAttribute(ATTR_DATA_LQIP)) { removeCover.call(this, cover.BLUR); } else { removeCover.call(this, cover.SHIMMER); }}
/** * Switches the LQIP with the real image URL. */function switchLQIP() { const $img = $(this); const src = $img.attr(ATTR_DATA_SRC);
$img.attr('src', encodeURI(src)); $img.removeAttr(ATTR_DATA_SRC);}
export function loadImg() { const $images = $('article img');
if ($images.length) { $images.on('load', handleImage); }
// Images loaded from the browser cache do not trigger the 'load' event $('article img[loading="lazy"]').each(function () { if (this.complete) { removeCover.call(this, cover.SHIMMER); } });
// LQIPs set by the data URI or WebP will not trigger the 'load' event, // so manually convert the URI to the URL of a high-resolution image. const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`);
if ($lqips.length) { $lqips.each(switchLQIP); }}