MediaWiki:Gadget-DeferredDisplay.js
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 initializeObserver() {
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyImage = entry.target;
if ($(lazyImage).hasClass('lazy-image-placeholder')) {
var parent = $(lazyImage).closest('.thumbinner, .gallerybox');
parent.css({
backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'contain',
display: 'block'
}).one('click', function(e) {
e.preventDefault();
$(this).css({
backgroundImage: '',
backgroundRepeat: '',
backgroundPosition: '',
backgroundSize: '',
display: ''
}).find('img').css({
visibility: ''
});
});
lazyImage.addEventListener('load', function() {
observer.unobserve(lazyImage);
});
}
}
});
}, {
rootMargin: '0px 0px 200px 0px'
});
// Observe all lazy images
document.querySelectorAll('.lazy-image-placeholder').forEach(function(image) {
observer.observe(image);
});
}
function applyStyles() {
$('img[alt*=NSFWTAG]').parent().add($('.thumbinner,.gallerybox')
.has('.nsfwelement').find('.image').parent())
.one('click', function(e) {
e.preventDefault();
$(this).css({
backgroundImage: '',
backgroundRepeat: '',
backgroundPosition: '',
backgroundSize: '',
display: ''
}).find('img').css({
visibility: ''
});
})
.css({
backgroundImage: 'url("https://static.jojowiki.com/images/customizations/Dialog-warning-yellow.png")',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'contain',
display: 'block'
})
.find('img').css({
visibility: 'hidden'
});
}
initializeObserver();
applyStyles();
});
