Portfolio - Grid Layout - Asset Loading

Hey y’all,

I built a page with a pretty deep grid of image assets wrapped in div bg’s. I can’t figure out a great way to manage page loading elegantly. Page loaders don’t wait for individual assets to load…

I know this issue has come up dozens of times in the forums, but I haven’t found a clear solution yet. In this case I’m using the new Grid implementation to create a work grid for my new portfolio.

Check out the WORK section (my plan is to create individual pages for each of the work categories/sorting), which currently defaults to "All’. While my image assets are far from optimized at the moment, I would like to be able to have a grid state showing all projects and I’m realizing now that asset load times are a real issue. Even after I optimize all the project preview thumbs, it will inevitably become an issue as the work page grows. All the div bg images are progressively loading at the same time and I really wish I could preload individual assets and reveal them as they’re complete. I couldn’t get the LazyLoad plugin here to work properly.

Read-only share:
https://preview.webflow.com/preview/effixx-studio-2019?utm_source=effixx-studio-2019&preview=52e31c59e4e2a86939442afaad5d79cf

Live Share:

SOS! :frowning:

PS - The site is VERY work-in-progress so most of it isn’t functional. I’m focused on the work grid at the moment.

Did you try it with actually optimized images? Currently they are indeed huge but it looks like they could be significantly decreased in size without sacrificing quality. I mean you can make them like ten times smaller and loading impact won’t be that bad. Gifs will have to be tweaked too, you can try this simple online tool.

1 Like

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.

Update: I’m now trying the @matt50 method and attempting to update it using background-image. Fumbling my way through understanding how to set data-bg attribute.