Implement lazy loading for Audio and Video

This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2022-01-12 05:53:50 +01:00
parent 4a70741419
commit 0d03a01a9f
4 changed files with 44 additions and 2 deletions
+16
View File
@@ -2,41 +2,57 @@
{% if include.link %}
<a href="{{ include.link }}" {% if include.caption %}alt="{{ include.caption }}"{% endif %}>
{% endif %}
{% assign file_info = site.static_files | where: "path", include.url %}
{% if include.type == "image" %}
<picture
class="content"
{% if include.lazyload %}data-lazyload=""{% endif %}
{% comment %}
src="{{ include.url | absolute_url }}"
{% endcomment %}
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}>
{% if include.lazyload %}<noscript>{% endif %}
<img src="{{ include.url | absolute_url }}"
{% if include.alt %}alt="{{ include.alt }}"{% endif %}
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}>
{% if include.lazyload %}</noscript>{% endif %}
</picture>
{% elsif include.type == "video" %}
<video controls
class="content"
{% if include.lazyload %}data-lazyload=""{% endif %}
{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
{% comment %}
src="{{ include.url | absolute_url }}"
{% endcomment %}
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}
{% if include.autoplay %}autoplay="true"{% endif %}
{% if include.muted %}muted="true"{% endif %}
{% if include.loop %}loop="true"{% endif %}>
{% if include.lazyload %}<noscript>{% endif %}
<source src="{{ include.url | absolute_url }}">
{% if include.lazyload %}</noscript>{% endif %}
</video>
{% elsif include.type == "audio" %}
<audio controls
class="content"
{% if include.lazyload %}data-lazyload=""{% endif %}
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
{% comment %}
src="{{ include.url | absolute_url }}"
{% endcomment %}
{% if include.width %}width="{{ include.width }}"{% endif %}
{% if include.height %}height="{{ include.height }}"{% endif %}
{% if include.autoplay %}autoplay="true"{% endif %}
{% if include.muted %}muted="true"{% endif %}
{% if include.loop %}loop="true"{% endif %}>
{% if include.lazyload %}<noscript>{% endif %}
<source src="{{ include.url | absolute_url }}">
{% if include.lazyload %}</noscript>{% endif %}
</audio>
{% endif %}
{% if include.link %}