freezeframe is not working with image inside Bootstrap4 tab-pane (only in tab-pane active)

[bairog]

freezeframe is not working with image inside Bootstrap4 tab-pane (only in tab-pane active)

[bairog]

I've tried a CSS/JavaScript tabs example from W3School.com
But again only overlay icon is drawn (no image) when hidden tab becomes active.
Looks like the problem is because of display: none; setting for all inactive tabs.

If I remove class="overlay" for images - images are shown with no problem.
Is there any workaround for this?

P. S. I've tried to hide images on document load with jQuery

$(window).on('load', function() {
   $("#London").hide();
   $("#Paris").hide();
   $("#Tokyo").hide();
});

as the resut for some images only overlay icon is drawn (no image), for some others have only first frame (with overlay icon) drawn.
Is there a way (some custom event maybe) to know that all needed for your plugin to work is loaded?

[nickforddev]

The problem is that the tabs are hiding the elements that Freezeframe needs (the images), when your JS is executed. You need to figure out how to either listen for an event that toggling the tabs triggers, or you could maybe watch for the "active" class being added to .tab-pane