Lazy load footer images

Only load the footer sponsor images when they start coming into view to save on data.
python-discord · Dec 8, 2023 · 7d1bbc1 · 7d1bbc1
1 parent dcb3e14
commit 7d1bbc1
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
@@ -189,28 +189,28 @@ <h1 class="title is-6 has-text-grey">
         </h1>
         <div class="columns is-mobile is-multiline">
           <a href="https://www.netcup.eu/" class="column is-narrow">
-            <img src="{% static "images/sponsors/netcup.png" %}" alt="netcup"/>
+            <img src="{% static "images/sponsors/netcup.png" %}" alt="netcup" loading="lazy"/>
           </a>
           <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-narrow">
-            <img src="{% static "images/sponsors/linode.png" %}" alt="Linode"/>
+            <img src="{% static "images/sponsors/linode.png" %}" alt="Linode" loading="lazy"/>
           </a>
           <a href="https://jetbrains.com" class="column is-narrow">
-            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"/>
+            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains" loading="lazy"/>
           </a>
           <a href="https://sentry.io" class="column is-narrow">
-            <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry"/>
+            <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry" loading="lazy"/>
           </a>
           <a href="https://notion.so" class="column is-narrow">
-            <img src="{% static "images/sponsors/notion.png" %}" alt="Notion"/>
+            <img src="{% static "images/sponsors/notion.png" %}" alt="Notion" loading="lazy"/>
           </a>
           <a href="https://streamyard.com" class="column is-narrow">
-            <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard"/>
+            <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard" loading="lazy"/>
           </a>
           <a href="https://www.netlify.com/" class="column is-narrow">
-            <img src="{% static "images/sponsors/netlify.png" %}" alt="Netlify"/>
+            <img src="{% static "images/sponsors/netlify.png" %}" alt="Netlify" loading="lazy"/>
           </a>
           <a href="https://www.cloudflare.com/" class="column is-narrow">
-            <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare"/>
+            <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare" loading="lazy"/>
           </a>
         </div>
       </div>