How to know when image is visible completely in Bubble?

Tips
1

So lets suppose you are passing high size image into image element so Bubble takes some time to show that image till than Bubble showing blank screen.

There is no “image is loaded” event.

Use the following JS to know when image is loaded completely-

var img = document.querySelector('#test_image img');
img.addEventListener('load', function() {
 console.log('Image is completely loaded and visible.');
 });

test_image is the id of the image element.

Checkout how it is done - Loom | Free Screen & Video Recording Software | Loom

4 Likes
2

Very nice.
Just to specify, this is not just image specific. It can be ran on any element.

You can also use Finished Loading (Lazy Loading) Plugin | Bubble.

Just add your element ID, and use the “is loaded” state.

Works on any element.

1 Like
3

Hi.I run this js but how to get the result?