diff --git a/js/remove-lazy-loading.js b/js/remove-lazy-loading.js new file mode 100644 index 00000000..b964debc --- /dev/null +++ b/js/remove-lazy-loading.js @@ -0,0 +1,25 @@ +/* + * remove-lazy-loading.js - Removes lazy loading from thread reply images to force them to eagerly load. + * Lazy loading of images helps render threads quicker, but this means that images will only be loaded on scroll. + * This impacts the user experience in a negative way since they will often see blank images when scrolling + * while the thumbnails load. This js solves this problem by allowing images to deferred and loaded lazily, + * and once everything has loaded, eagerly load the images at once by removing the lazy attribute. + * + * + * Copyleft (ɔ) 2021 Leftypol Moderation Team + * + * Usage: + * $config['additional_javascript'][] = 'js/remove-lazy-loading.js' + * + */ + + +function removeLazyLoading(){ + if(document.readyState === "complete"){ + $(".post-image").removeAttr("loading") + } else { + $(window).on("load", removeLazyLoading) + } +} + +$(removeLazyLoading); diff --git a/templates/header.html b/templates/header.html index 0a7aa95f..8e23f071 100644 --- a/templates/header.html +++ b/templates/header.html @@ -56,3 +56,10 @@ padding: 0 !important; } {% endraw %}{% endif %} + {% if 'js/remove-lazy-loading.js' in config.additional_javascript or 'js/remove-lazy-loading.js' in config.additional_javascript_defer %} + + {% endif %} diff --git a/templates/post/image.html b/templates/post/image.html index 16fe20b6..3d04f27e 100644 --- a/templates/post/image.html +++ b/templates/post/image.html @@ -24,22 +24,35 @@ > {% else %} - + " + style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt="" + /> + {% endmacro %} + {% import _self as image %} + {% if 'js/remove-lazy-loading.js' in config.additional_javascript or 'js/remove-lazy-loading.js' in config.additional_javascript_defer %} + {{image.tag(true, config, post)}} + + {% else %} + {{image.tag(false, config, post)}} + {% endif %} {% endif %}