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

[bairog]

Hello. My goal is to implement some tabs with images inside each tab (each image with freezeframe functionality). I've tried to use freezeframe with image that is placed inside Bootstrap4 tab-pane. My code is the following:

<div>
    <ul class="nav nav-pills text-warning">
        <li class="nav-item">
            <a class="nav-link active" href="#tab-first" data-toggle="tab">First Tab</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab-second" data-toggle="tab">SecondTab</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-first">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif" />

                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
        <div class="tab-pane" id="tab-second">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b0652b31fbd0a5/1444744817955/parislove9801.gif" />
                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
    </div>
</div>

The result is that for image on the First Tab freezeframe is working correctly, but for First Tab only overlay icon is drawn (no image). JSFiddle link

P. S. Same code is working correctly whrn images are not placed inside tab-pane.

Is that by design or a bug? Or maybe I'm missing something? Thank you in advance.

[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