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;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
{% endraw %}</style>{% endif %}
|
{% 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>
|
</video>
|
||||||
{% else %}
|
{% else %}
|
||||||
<img class="post-image"
|
{% macro tag(doLazy, config, post) %}
|
||||||
src="
|
<img
|
||||||
{% if post.thumb == 'file' %}
|
class="post-image {{ doLazy ? 'no-script-no-display'}}"
|
||||||
{{ config.root }}
|
{{ doLazy ? 'loading="lazy"' }}
|
||||||
{% if config.file_icons[post.filename|extension] %}
|
src="
|
||||||
{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
|
{% 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 %}
|
{% else %}
|
||||||
{{ config.file_thumb|sprintf(config.file_icons.default) }}
|
{{ config.uri_thumb }}{{ post.thumb }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% elseif post.thumb == 'spoiler' %}
|
"
|
||||||
{{ config.root }}{{ config.spoiler_image }}
|
style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt=""
|
||||||
{% else %}
|
/>
|
||||||
{{ config.uri_thumb }}{{ post.thumb }}
|
{% endmacro %}
|
||||||
{% endif %}
|
{% 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 %}
|
||||||
style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt=""
|
{{image.tag(true, config, post)}}
|
||||||
/>
|
<noscript>
|
||||||
|
{{image.tag(false, config, post)}}
|
||||||
|
</noscript>
|
||||||
|
{% else %}
|
||||||
|
{{image.tag(false, config, post)}}
|
||||||
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user