Thanks @dram - I’m going to slim down all my images and see what kind of visual impact that has on the overall grid loading up… but I guess I’m concerned about not having full control over how people will experience the load order.
I’m attempting to adapt the example @bartekkustra laid out here but with div / background-image instead of img / src for his example script that populates the attributes.
I know that the Lazy Load library supports this using the jQuery wrapper but my DOM / JS chops are kind of rusty so I’m not sure if I’m doing it correctly. I’m also running into an error where the library doesn’t seem to want to load.
Here’s my modified script, using the “fadeIn” effect. I’m using the div selector instead of img, and applying the .lazy class to grid-img-wrapper as a combo class. There’s a duplicate page in my webflow designer for Work - ALL where I’m sandboxing the Lazy Load (effixx-studio-2019.webflow.io/work/work-all-lazyload)
<script>
$(document).ready(function() {
// prepare images to lazyload
$('div.lazy').each(function() {
//$(this).attr('data-original', $(this).attr('src'));
// $(this).removeAttr('src').removeAttr('alt');
$(this).attr('background-image', $(this).css('background-image'));
console.log($(this).css('background-image'));
});
$('div.lazy').lazyload({
effect : "fadeIn"
});
});
</script>
Finally, I seem to be experiencing an error while loading the library. Console output seems to correctly reflect the background-image url but subsequently the lazyload() function doesn’t seem to work. I wonder if this version of the library is compatible with whatever version of jQuery Webflow has implemented.
