Add polyfill for loading=lazy in Firefox.
Debug some of the issues that brings up, and use "less" lazy-loading on images.
This commit is contained in:
Jason McBrayer
parent
893a9c49d7
commit
d8a0e57190
|
|
@ -0,0 +1,5 @@
|
|||
/*
|
||||
* Loading attribute polyfill - https://github.com/mfranzke/loading-attribute-polyfill
|
||||
* @license Copyright(c) 2019 by Maximilian Franzke
|
||||
*/
|
||||
!function(e,t){"use strict";var r,a,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]',loadingSupported:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype};"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(r=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},o)),a="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};var n="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(r=t.querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.dataset.lazySrcset&&(e.setAttribute("srcset",e.dataset.lazySrcset),delete e.dataset.lazySrcset)}),e.setAttribute("src",e.dataset.lazySrc),delete e.dataset.lazySrc}function d(){document.querySelectorAll("noscript."+e).forEach(function(e){var t=e.textContent||e.innerHTML;o.loadingSupported||(void 0!==r?("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+n+'" data-lazy-remove="true"></source>'+t),t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+n+'" data-lazy-src=')}(t)):t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src=')}(t));var a=document.createElement("div");for(a.innerHTML=t;a.firstChild;)o.loadingSupported||void 0===r||!a.firstChild.tagName||"img"!==a.firstChild.tagName.toLowerCase()&&"iframe"!==a.firstChild.tagName.toLowerCase()||r.observe(a.firstChild),e.parentNode.insertBefore(a.firstChild,e);e.parentNode.removeChild(e)}),window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(o.lazyImage+"[data-lazy-src],"+o.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})}/comp|inter/.test(document.readyState)?a(d):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){a(d)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&d()})}("loading-lazy");
|
||||
|
|
@ -46,6 +46,7 @@
|
|||
<script type="text/javascript" src="{% static 'js/intercooler.js' %}"></script>
|
||||
<script type="application/javascript" src="{% static 'js/mousetrap.min.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/loading-attribute-polyfill.min.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/brutaldon-enhancements.js' %}"></script>
|
||||
{% block page_scripts %}
|
||||
{% endblock %}
|
||||
|
|
@ -80,12 +81,16 @@
|
|||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{% url "home" %}">
|
||||
{% if own_acct %}
|
||||
<noscript class=loading-lazy">
|
||||
<img loading="lazy" src="{{ own_acct.avatar_static }}"
|
||||
class="image is-32x32 avatar"
|
||||
alt="Brutaldon ('{{ own_acct.username }}')">
|
||||
</noscript>
|
||||
{% else %}
|
||||
<noscript class="loading-lazy">
|
||||
<img loading="lazy" src="{% static "images/brutaldon.png" %}"
|
||||
class="image is-32x32" alt="Brutaldon">
|
||||
</noscript>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -185,10 +190,12 @@
|
|||
</div>
|
||||
<div class="level-right">
|
||||
{% if preferences.theme.is_brutalist %}
|
||||
<noscript class="loading-lazy">
|
||||
<img loading="lazy" class="level-item" src="{% static '/images/lynx.gif' %}"
|
||||
alt="Lynx Now!">
|
||||
<img loading="lazy" class="level-item" src="{% static '/images/now9.gif' %}"
|
||||
alt="Netscape Now!">
|
||||
</noscript>
|
||||
{% endif %}
|
||||
<a class="level-item is-size-7" href="{% url "privacy" %}">
|
||||
Privacy
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
<figure class="media-left">
|
||||
<p class="image is-64x64 account-avatar">
|
||||
<a href="{% url "user" toot.account.acct %}">
|
||||
<img loading="lazy" src="{{ toot.account.avatar_static }}"
|
||||
<img loading="auto" src="{{ toot.account.avatar_static }}"
|
||||
alt="">
|
||||
</a>
|
||||
</p>
|
||||
{% if reblog %}
|
||||
<p class="image is-32x32 reblog-icon" >
|
||||
<a href="{% url "user" reblog_by %}">
|
||||
<img loading="lazy" src ="{{ reblog_icon }}" alt="">
|
||||
<img loading="auto" src ="{{ reblog_icon }}" alt="">
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
|
@ -71,9 +71,11 @@
|
|||
{% if toot.card.image %}
|
||||
<div class="column is-one-third">
|
||||
<a href="{{ toot.card.url }}">
|
||||
<noscript class="loading-lazy">
|
||||
<img loading="lazy" alt="{{ toot.card.title }}"
|
||||
src="{{ toot.card.image }}"
|
||||
class="is-max-128">
|
||||
</noscript>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -98,6 +100,7 @@
|
|||
{% if media.type == "image" %}
|
||||
<figure class="column attachment-image">
|
||||
<a href="{{ media.url }}">
|
||||
<noscript class="loading-lazy">
|
||||
{% if toot.sensitive %}
|
||||
<img loading="lazy" src="{% static "images/sensitive.png" %}"
|
||||
{% else %}
|
||||
|
|
@ -114,6 +117,7 @@
|
|||
title="{{ media.description }}"
|
||||
{% endif %}
|
||||
class="image is-max-256">
|
||||
</noscript>
|
||||
</a>
|
||||
</figure>
|
||||
{% else %}
|
||||
|
|
@ -122,6 +126,7 @@
|
|||
poster="{{ media.preview_url }}">
|
||||
<source src="{{ media.url }}" type="video/mp4">
|
||||
<a href="{{ media.url }}">
|
||||
<noscript class="loading-lazy">
|
||||
{% if toot.sensitive %}
|
||||
<img loading="lazy" src="{% static "images/sensitive.png" %}"
|
||||
{% else %}
|
||||
|
|
@ -138,6 +143,7 @@
|
|||
title="{{ media.description }}"
|
||||
{% endif %}
|
||||
class="image is-max-256">
|
||||
</noscript>
|
||||
</a>
|
||||
</video>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"fork-awesome": "^1.1.0",
|
||||
"intercooler": "^1.2.1",
|
||||
"jquery": "^3.3.1",
|
||||
"loading-attribute-polyfill": "^1.1.0",
|
||||
"magnific-popup": "^1.1.0",
|
||||
"mousetrap": "^1.6.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,11 @@ jquery@^3.3.1:
|
|||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf"
|
||||
integrity sha512-ggRCXln9zEqv6OqAGXFEcshF5dSBvCkzj6Gm2gzuR5fWawaX8t7cxKVkkygKODrDAzKdoYw3l/e3pm3vlT4IbQ==
|
||||
|
||||
loading-attribute-polyfill@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/loading-attribute-polyfill/-/loading-attribute-polyfill-1.1.0.tgz#a7d50bfae00a6ab93bf3246bd3337e34adc808ac"
|
||||
integrity sha512-KFVrFen+aQzGXIbx+nURedF3r/VvHvROBEXu9T7Z8vwCwNOI7w5+HMc6UWvOmezgp8n2MICi2D/PzXUD2fZ6Xg==
|
||||
|
||||
magnific-popup@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/magnific-popup/-/magnific-popup-1.1.0.tgz#3e7362c5bd18f6785fe99e59d013e20af33d3049"
|
||||
|
|
|
|||
Loading…
Reference in New Issue