In my quest to optimize my page load speed I decided that I needed a way to lazy load elements. So I present to you my first plugin ever. This improved my lighthouse speed tests significantly on an app for one of my clients and I thought that others might benefit from it as well.
All this element does is check when all of the contents of a group or element is finished loading and then returns a “yes”. This “yes” can trigger a workflow or be seen as a state of the element.
Have you tested how it operates with repeating groups? My first thought is to have a repeating group set to have a certain number of results (maybe 12) and then when the RG is finished loading to change the datasource to show more results.
My concern is that the finish loading will get registered twice. Or, is it that the RG will be loaded once it is first shown and the change in datasource doesn’t actually cause the RG to be reloaded, and therefore trigger the finished loading a second time?
@boston85719 I have not tested this with repeating groups as my use case was for a landing page. If you get a chance to test it with repeating groups, please let me know how it works!
It cannot register finished loading twice. The element starts out as a “no” and switches to a “yes” when it is done loading. There is currently no way to reset the state to “no”.
Hello everyone! I’m happy to announce the newest addition to the Finished Loading (Lazy Loading) plugin. Trigger when visible!
This element will set it’s state to yes when an element is visible on a client’s screen. You can set it to trigger only once or multiple times and you can change the percentage that must be visible to trigger.
There was a huge boot to the lighthouse score on one of my client’s apps when I implemented a cascading scroll loading effect to their landing page. It went from a score of 12 to a score of 34!
This is what made me think it wouldn’t be useful for what I thought it would be a good use case for…those events when you switch the source of an RG or perform some filtering to change results.
OK, thank you for your answer. What general tips do you have about lazy loading of repeating groups? with or without this plug-in?
There is one I’m trying to load with up to 100 items, and I’m trying to make the experience quicker on the UI but maybe there is some smart loading but I can do? I like your idea of 2 sources?
Im loading in “full list” because it looks cleaner without the scroll bar
This tutorial covers the technique I use. Can easily apply pagination and other helpful UX such as length of list selection…tutorial doesn’t cover those aspects, but gives the way to setup the RG to enable lots of other possibilities.
@StarrK_Designs is it possible to have the ID attribute the TriggerWhenVisible element refers to be dynamic? I can give each cell a unique ID (screenshot attached), but can’t replicate the ID within this element because it doesn’t support dynamic data.
I’d like to include this element within each cell of the repeating group and understand whether a cell is visible or not at any given time. Thanks!
Have you seen this before? It seems to be working correctly, but my concern is that this could be impacting performance scores of the site (which can have downstream effects on SEO and other page ranking).
I’m trying to build a fast landing page that only loads above-the-fold content on initial load unless the user scrolls beyond a certain point. But the “TriggerWhenVisible” doesn’t seem to be working for me.
