MediaWiki:Gadget-ImageCompare.js

mw.loader.getScript('https://unpkg.com/beerslider/dist/BeerSlider.js')
.then(function () {
    $(document).ready(function() {
        $.fn.BeerSlider = function (options) {
            options = options || {};
            return this.each(function() {
                new BeerSlider(this, options);
            });
        };

        function waitForImagesToLoad($img1, $img2, callback) {
            var img1Loaded = false;
            var img2Loaded = false;

            function checkIfBothImagesLoaded() {
                if (img1Loaded && img2Loaded) {
                    callback();
                }
            }

            $img1.on('load', function() {
                img1Loaded = true;
                checkIfBothImagesLoaded();
            }).on('error', function() {
                console.error('Image 1 failed to load.');
            });

            $img2.on('load', function() {
                img2Loaded = true;
                checkIfBothImagesLoaded();
            }).on('error', function() {
                console.error('Image 2 failed to load.');
            });

            // If images are already loaded (cached)
            if ($img1[0].complete && $img1[0].naturalHeight !== 0) {
                img1Loaded = true;
            }
            if ($img2[0].complete && $img2[0].naturalHeight !== 0) {
                img2Loaded = true;
            }

            // Check initially if already loaded
            checkIfBothImagesLoaded();
        }

        function initializeBeerSlider(el) {
            var $img1 = $(el).find('img').first(); // Find the first img inside the beer-slider
            var $img2 = $(el).find('.beer-reveal img').first(); // Find the first img inside the beer-reveal

            console.log('Initializing BeerSlider for element:', el);
            console.log('Image 1 src:', $img1.attr('src'));
            console.log('Image 2 src:', $img2.attr('src'));

            // Check if both images have valid src attributes
            var img1Src = $img1.attr('src');
            var img2Src = $img2.attr('src');

            if (img1Src && img2Src) {
                waitForImagesToLoad($img1, $img2, function() {
                    $(el).BeerSlider({start: $(el).data('beer-start')});
                });
            } else {
                console.warn('Skipping BeerSlider initialization for element due to missing image src:', el);
            }
        }

        $('.beer-slider').each(function(index, el) {
            initializeBeerSlider(el);
        });
    });
}, function (e) {
    // Script failed
    mw.log.error(e.message); // => "Failed to load BeerSlider script"
});