MediaWiki:Gadget-DeferredDisplay.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 11:20, 26 July 2024 by Vish (talk | contribs)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/**
 * Deferred display of {{tl|nsfw}}-tagged images.
 * jshint validation
 * @author Dschwen, 2013 / Vish, 2023
 */

$(document).ready(function() {
    function applyNSFWOverlay() {
        $('img[alt*=NSFWTAG]').each(function() {
            var img = $(this);
            var container = img.parent().add($('.thumbinner,.gallerybox').has('.nsfwelement').find('.image').parent());

            // Set initial styles
            container.css({
                backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
                display: 'block'
            });

            img.css('visibility', 'hidden');

            // Click event to reveal image
            container.one('click', function (e) {
                $(this).css('backgroundImage', '').find('img').css('visibility', '');
                e.preventDefault();
            });

            // Handle lazy-loaded images
            img.on('load', function() {
                img.css('visibility', 'hidden'); // Ensure image is hidden after lazy load
            });
        });
    }

    applyNSFWOverlay();

    // Re-apply the overlay after lazy load completes
    $(document).on('lazyloaded', function(e) {
        applyNSFWOverlay();
    });
});