Lazy loading of images

2024-02-25 13:23:26 +11:00
parent 4917bc1aa1
commit 2a5bf8ee76
8 changed files with 13 additions and 13 deletions
--- a/slices/admin/templates/shared/_post.html.slim
+++ b/slices/admin/templates/shared/_post.html.slim
@@ -12,7 +12,7 @@ div class="flex-initial w-full"
  div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100"
    div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1"
      -post.photos.each do |photo|
-        img class="w-44 h-44 object-cover rounded" src=photo["value"]
+        img loading="lazy" class="w-44 h-44 object-cover rounded" src=photo["value"]

  p class="text-sm text-blue-400"
    a href="/post/#{post.slug}"
--- a/slices/main/templates/podcasts/index.html.slim
+++ b/slices/main/templates/podcasts/index.html.slim
@@ -21,7 +21,7 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:
      - podcasts.each do |podcast|
        tr
          td
-            img class="w-14 m-0 p-0 rounded" src="#{Hanami.app.settings.micropub_site_url}/media/podcast_art/#{podcast.overcast_id}.jpg"
+            img loading="lazy" class="w-14 m-0 p-0 rounded" src="#{Hanami.app.settings.micropub_site_url}/media/podcast_art/#{podcast.overcast_id}.jpg"
          td class="p-0 align-middle"
            a class="block" href="#{podcast.url}"
              = podcast.name
--- a/slices/main/templates/posts/show.html.slim
+++ b/slices/main/templates/posts/show.html.slim
@@ -11,7 +11,7 @@ article class="h-entry"
            svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
              path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
        div class="p-2 text-center w-full"
-          img class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc"
+          img loading="lazy"  class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4 mx-auto" :src="imgModalSrc" :alt="imgModalSrc"
          p x-text="imgModalDesc" class="text-center text-white"
  div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
    h1 class="p-name mb-2"
@@ -31,7 +31,7 @@ article class="h-entry"
      - if post.photos?
        - post.photos.each_with_index do |photo, idx|
          figure id="photo-#{idx}"
-            img class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
+            img loading="lazy" class="u-photo shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" src=photo["value"] alt=photo["alt"]
            figcaption
              = photo["alt"]
      - if post.videos?
@@ -44,14 +44,14 @@ article class="h-entry"


      - if post.location
-        img class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
+        img loading="lazy" class="shadow-solid shadow-pink-100 dark:shadow-pink-200 rounded mb-4" src=post.large_map
    -if post.webmentions && post.webmentions.count > 0
      div class="mt-12"
        h3 #{post.webmentions.count} Comment#{post.webmentions.count != 1 ? "s" : ""}
        - post.webmentions.each do |mention|
          div class="prose-p:m-1 mb-6 p-8 bg-orange-100 dark:bg-indigo-900 squircle"
            div class="flex h-8"
-              img class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
+              img loading="lazy" class="w-8 rounded-full m-0 mr-2" src=mention.author_photo
              a class="block text-orange-700 dark:text-violet-300 no-underline hover:underline" href=mention.author_url
                = mention.author_name
            div class="prose dark:prose-invert dark:text-indigo-250 prose-a:text-orange-700 dark:prose-a:text-violet-300 prose-a:no-underline hover:prose-a:underline"
@@ -77,7 +77,7 @@ article class="h-entry"
            - past_movies.map do |movie|
              a href=movie.url
                figure class="w-24"
-                  img class="rounded hover:opacity-80" src=movie.poster
+                  img loading="lazy" class="rounded hover:opacity-80" src=movie.poster
                  / figcaption= movie.title
          hr
      - if text_posts.count > 0 || photo_posts.count > 0
--- a/slices/main/templates/shared/_photo_post.html.slim
+++ b/slices/main/templates/shared/_photo_post.html.slim
@@ -2,8 +2,8 @@
  - post.photos.each_with_index do |photo, idx|
    div class="rounded max-w-xs"
      a href="#{post.permalink}#photo-#{idx}"
-        img class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}"
+        img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{photo["value"]}" alt="#{photo["alt"]}"
 - else
  div class="rounded max-w-xs"
    a href="#{post.permalink}"
-      img class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}"
+      img loading="lazy" class="rounded object-cover transition-transform ease-out hover:scale-105 h-48 w-48" src="#{post.photos[0]["value"]}" alt="#{post.photos[0]["alt"]}"
--- a/slices/main/templates/shared/_post.html.slim
+++ b/slices/main/templates/shared/_post.html.slim
@@ -6,7 +6,7 @@ div class="mb-8 h-entry"
    == post.excerpt
    div class="grid gap-4 grid-flow-row grid-cols-#{post.photos.count} grid-rows-1"
      -post.photos.each do |photo|
-        img class="w-44 h-44 object-cover rounded" src=photo["value"]
+        img loading="lazy" class="w-44 h-44 object-cover rounded" src=photo["value"]
  / == render "shared/tags", tags: post.tags

  p class="text-sm text-blue-400 dark:text-indigo-400"
--- a/slices/main/templates/shared/_status.html.slim
+++ b/slices/main/templates/shared/_status.html.slim
@@ -4,7 +4,7 @@ div class="mb-8 h-entry border border-gray-200 m-2 p-4 bg-gray-50 hover:bg-gray-
      == " 💬 #{post.raw_content}"
      div class="grid gap-4 grid-flow-row grid-cols-4 grid-rows-1"
        -post.photos.each do |photo|
-          img class="w-32 h-32 object-cover rounded" src=photo["value"]
+          img loading="lazy" class="w-32 h-32 object-cover rounded" src=photo["value"]
    == render "shared/tags", tags: post.tags

  div class="mb-8"
--- a/slices/main/templates/site/home.html.slim
+++ b/slices/main/templates/site/home.html.slim
@@ -12,7 +12,7 @@ div class="mb-8 max-w-screen-md mx-auto border-t border-solid border-gray-200 da
      a class="u-url block my-auto hover:underline decoration-wavy" href=latest_status.permalink
        span class="e-content status-body"
          - if latest_status.key_image
-            img class="float-start max-w-32 rounded mr-2" src=latest_status.key_image
+            img loading="lazy" class="float-start max-w-32 rounded mr-2" src=latest_status.key_image
          p
            == latest_status.raw_content
      - latest_status.syndicated_to.each do |loc|
--- a/slices/main/templates/timemachine/show.html.slim
+++ b/slices/main/templates/timemachine/show.html.slim
@@ -26,7 +26,7 @@ div class="max-w-screen-md mx-auto px-4 m-4 h-max"
                  - if post.photos.count > 0
                    - post.photos.each do |photo|
                      a href="/post/#{post.slug}"
-                        img class="mb-0 rounded" src="#{photo["value"]}"
+                        img loading="lazy" class="mb-0 rounded" src="#{photo["value"]}"
                        = post.name
      - else
        p No posts