Well, here’s the thing: The Bubble “page is loaded (entire)” event is the equivalent of something like:
<script>
window.addEventListener('DOMContentLoaded', function(){
console.log('The page is loaded... whatever THAT means.');
});
</script>
That seems to be what’s evaluated (if might be a jQuery ready function, but same thing) when Bubble reports the following in the console:
But as you’ve noticed, that doesn’t mean that all elements that your page requires are really visible to the user.
I found this interesting article that, from my testing, seems to be correct (it’s worth a read!!!):
So, let’s take a real world example of this. I have a page with a custom calendar on it. A repeating group is used to display the calendar – this is the general technique pioneered by @codurly in another really awesome post – anyway, that RG has 42 cells in it.
If I’ve got expose ID attributes turned on in my project, I can do something like give all of the elements in that group a unique id attribute like so:
So now all of those elements in my page are going to have id’s like this. Here’s a view of inspecting the last of those elements in the chrome console – here’s “clickDay42”:
I could use the technique described in the article above to put some code in the header of my page to check if “clickDay42” is ready to go. The code is like this:
<script>
// check for clickDay visibility:
function myFunk() {
if (!$("#clickDay42").size()) {
console.log('Still Waiting for clickDay42...');
window.requestAnimationFrame(myFunk);
}else {
console.log('clickDay42 is visible now...');
bubble_fn_clickDay(true);
}
};
myFunk();
</script>
And I add it to my page like this:
And loading the page with the console open will show me a bunch of waiting and then, finally, that element is visible. (The log statement, in fact, does get printed RIGHT BEFORE/at the time that my browser shows the full view – I didn’t do a video so you just have to trust me on that):
You might be wondering, “What the heck is that ‘bubble_fn_clickDay’ function you’re calling?” That’s just a JavaScript to Bubble element from Toolbox plugin, configured like this:
So, I’d have a way of getting that state back up into Bubble and using it somehow (like, turn a loading indicator on and off). I could do that by having an icon that is hidden when element “JS ClickDay42 is Visible”'s value is true, and shown when JS ClickDay42 is Visible’s value is false.
NOW, this is not what you’re looking for, really. There’s no easier way unfortunately to know when some specific thing is rendered and ready. And, of course, each page is going to be different.
There is another condition we can check (rather than ‘DOMContentLoaded’ which I mentioned way up at the top of this post). THAT condition will only (supposedly) when all additional resources like images have also loaded. It would be like this:
My page I’ve been discussing in the examples does not load any images, though, so this function executes at the same time as the Bubble “page is loaded (entire)” condition and is not helpful. To show you, I add a script like this:
Here’s what happens in the browser. As you can see, we are not that far along at all vis-a-vis my repeating group!:
And in fact, Bubble hasn’t even reported its “page is loaded (entire)” state yet.
If we continue execution, we ultimately get here and you can see from the console log that it took a bit of time…:
So THAT’S not what you’re looking for either.
Anyway, I’ve gone round and round on this and there’s no easy generic way AFAICT to know when the entire page and all elements are loaded and rendered and ready for action.
I’ve been messing around with ways that one might generalize this and have not yet come up with a good solution.