forked from leftypol/leftypol
bringing back lazy loading feature
This commit is contained in:
parent
6f2e953bd5
commit
fe04e70f11
25
js/remove-lazy-loading.js
Normal file
25
js/remove-lazy-loading.js
Normal file
|
@ -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);
|
|
@ -56,3 +56,10 @@
|
|||
padding: 0 !important;
|
||||
}
|
||||
{% endraw %}</style>{% endif %}
|
||||
{% if 'js/remove-lazy-loading.js' in config.additional_javascript or 'js/remove-lazy-loading.js' in config.additional_javascript_defer %}
|
||||
<noscript>
|
||||
<style type="text/css">
|
||||
.no-script-no-display {display: none;}
|
||||
</style>
|
||||
</noscript>
|
||||
{% endif %}
|
||||
|
|
|
@ -24,22 +24,35 @@
|
|||
>
|
||||
</video>
|
||||
{% else %}
|
||||
<img class="post-image"
|
||||
src="
|
||||
{% if post.thumb == 'file' %}
|
||||
{{ config.root }}
|
||||
{% if config.file_icons[post.filename|extension] %}
|
||||
{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
|
||||
{% macro tag(doLazy, config, post) %}
|
||||
<img
|
||||
class="post-image {{ doLazy ? 'no-script-no-display'}}"
|
||||
{{ doLazy ? 'loading="lazy"' }}
|
||||
src="
|
||||
{% if post.thumb == 'file' %}
|
||||
{{ config.root }}
|
||||
{% if config.file_icons[post.filename|extension] %}
|
||||
{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
|
||||
{% else %}
|
||||
{{ config.file_thumb|sprintf(config.file_icons.default) }}
|
||||
{% endif %}
|
||||
{% elseif post.thumb == 'spoiler' %}
|
||||
{{ config.root }}{{ config.spoiler_image }}
|
||||
{% else %}
|
||||
{{ config.file_thumb|sprintf(config.file_icons.default) }}
|
||||
{{ config.uri_thumb }}{{ post.thumb }}
|
||||
{% endif %}
|
||||
{% elseif post.thumb == 'spoiler' %}
|
||||
{{ config.root }}{{ config.spoiler_image }}
|
||||
{% else %}
|
||||
{{ config.uri_thumb }}{{ post.thumb }}
|
||||
{% endif %}
|
||||
"
|
||||
style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt=""
|
||||
/>
|
||||
"
|
||||
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)}}
|
||||
<noscript>
|
||||
{{image.tag(false, config, post)}}
|
||||
</noscript>
|
||||
{% else %}
|
||||
{{image.tag(false, config, post)}}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
|
|
Loading…
Reference in New Issue
Block a user