From b645942dd218491bfa24b0a68971d7bf37feb771 Mon Sep 17 00:00:00 2001
From: Ben Halpern <ben@dev.to>
Date: Thu, 9 May 2019 16:37:06 -0400
Subject: [PATCH] Add loading='lazy' attribute to some images (#2776)

---
 app/assets/javascripts/utilities/buildArticleHTML.js.erb    | 4 ++--
 app/labor/markdown_parser.rb                                | 2 +-
 .../_article_followable_area.html.erb                       | 1 +
 app/views/articles/_bottom_content.html.erb                 | 1 +
 app/views/articles/_sidebar.html.erb                        | 4 ++--
 app/views/articles/_sticky_nav.html.erb                     | 6 +++---
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js.erb b/app/assets/javascripts/utilities/buildArticleHTML.js.erb
index 8914444c6..75ab8ca94 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js.erb
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js.erb
@@ -49,7 +49,7 @@ function buildArticleHTML(article) {
     var profileUsername = article.user.username
     var orgHeadline = "";
     if (article.organization && !document.getElementById("organization-article-index")) {
-      orgHeadline = '<div class="article-organization-headline"><a class="org-headline-filler" href="/'+article.organization.slug+'"><span class="article-organization-headline-inner"><img alt="'+article.organization.name+' logo" src="'+article.organization.profile_image_90+'">'+article.organization.name+'</span></a></div>'
+      orgHeadline = '<div class="article-organization-headline"><a class="org-headline-filler" href="/'+article.organization.slug+'"><span class="article-organization-headline-inner"><img alt="'+article.organization.name+' logo" src="'+article.organization.profile_image_90+'" loading="lazy">'+article.organization.name+'</span></a></div>'
     }
     var bodyTextSnippet = "";
     var commentsBlobSnippet = "";
@@ -115,7 +115,7 @@ function buildArticleHTML(article) {
       '+orgHeadline+'\
       <div class="small-pic">\
        <a href="/'+profileUsername+'" class="small-pic-link-wrapper">\
-         <img src="'+picUrl+'" alt="'+profileUsername+' profile">\
+         <img src="'+picUrl+'" alt="'+profileUsername+' profile" loading="lazy">\
        </a>\
        </div>\
        <a href="'+article.path+'" class="small-pic-link-wrapper index-article-link" id="article-link-'+article.id+'">\
diff --git a/app/labor/markdown_parser.rb b/app/labor/markdown_parser.rb
index d47c46f8e..8b678f992 100644
--- a/app/labor/markdown_parser.rb
+++ b/app/labor/markdown_parser.rb
@@ -90,7 +90,7 @@ class MarkdownParser
       next unless src
       # allow image to render as-is
       next if allowed_image_host?(src)
-
+      img["loading"] = "lazy"
       img["src"] = if giphy_img?(src)
                      src.gsub("https://media.", "https://i.")
                    else
diff --git a/app/views/additional_content_boxes/_article_followable_area.html.erb b/app/views/additional_content_boxes/_article_followable_area.html.erb
index 258fb1895..8bc8fdff9 100644
--- a/app/views/additional_content_boxes/_article_followable_area.html.erb
+++ b/app/views/additional_content_boxes/_article_followable_area.html.erb
@@ -22,6 +22,7 @@
       <img class="profile-image"
            src="<%= ProfileImage.new(followable).get(200) %>"
            alt="<%= followable.name %> profile image"
+           loading="lazy"
            data-details="<%= followable&.slug if classification == "boosted" %>__PROFILE"
            style="border: 4px solid <%= followable.bg_color_hex %>" /></a>
   </div>
diff --git a/app/views/articles/_bottom_content.html.erb b/app/views/articles/_bottom_content.html.erb
index 593917215..5358fa1eb 100644
--- a/app/views/articles/_bottom_content.html.erb
+++ b/app/views/articles/_bottom_content.html.erb
@@ -11,6 +11,7 @@
                            quality: "auto",
                            flags: "progressive",
                            fetch_format: "auto",
+                           loading: "lazy",
                            sign_url: true,
                            alt: "#{article.user.username} profile image") %>
         </div>
diff --git a/app/views/articles/_sidebar.html.erb b/app/views/articles/_sidebar.html.erb
index 6ecca58c6..655f7097c 100644
--- a/app/views/articles/_sidebar.html.erb
+++ b/app/views/articles/_sidebar.html.erb
@@ -16,8 +16,8 @@
             <% @sponsors.each do |organization| %>
               <div class="sidebar-sponsor">
                 <a class="partner-link" href="<%= organization.sponsorship_url %>" target="_blank" data-details="<%= organization.slug %>__image">
-                  <img src="<%= cloudinary(organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" class="partner-image-light-mode" />
-                  <img src="<%= cloudinary(organization.dark_nav_image_url || organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" class="partner-image-dark-mode" />
+                  <img src="<%= cloudinary(organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-light-mode" />
+                  <img src="<%= cloudinary(organization.dark_nav_image_url || organization.nav_image_url) %>" style="margin-bottom:8px;" alt="<%= organization.name %> logo" loading="lazy" class="partner-image-dark-mode" />
                 </a>
                 <div class="sponsor-tagline" style="display:inline;">
                   <%= organization.sponsorship_tagline %>
diff --git a/app/views/articles/_sticky_nav.html.erb b/app/views/articles/_sticky_nav.html.erb
index ba9026b73..d3b7f79d1 100644
--- a/app/views/articles/_sticky_nav.html.erb
+++ b/app/views/articles/_sticky_nav.html.erb
@@ -99,7 +99,7 @@
               </div>
             <% end %>
             <a class="primary-sticky-nav-element primary-sticky-nav-author-element" href="<%= article.path %>">
-              <img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" alt="<%= article.user.name %> profile image">
+              <img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" loading="lazy" alt="<%= article.user.name %> profile image">
               <%= article.title %>
               <div class="primary-sticky-nav-element-details">
                 <% article.decorate.cached_tag_list_array.each do |tag| %>
@@ -115,11 +115,11 @@
           <div class="primary-sticky-nav-element-wrapper">
             <% if index == 0 %>
               <div class="primary-sticky-nav-title">
-                <img src="<%= asset_path "emoji/apple-fire.png" %>" alt="Fire emoji"> Trending on <a href="https://dev.to">dev.to</a>
+                <img src="<%= asset_path "emoji/apple-fire.png" %>" alt="Fire emoji" loading="lazy"> Trending on <a href="https://dev.to">dev.to</a>
               </div>
             <% end %>
             <a class="primary-sticky-nav-element" href="<%= article.path %>">
-              <img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image" alt="<%= article.user.name %> profile image">
+              <img src="<%= ProfileImage.new(article.user).get(90) %>" class="primary-sticky-nav-profile-image"  loading="lazy" alt="<%= article.user.name %> profile image">
               <%= article.title %>
               <div class="primary-sticky-nav-element-details">
                 <% article.decorate.cached_tag_list_array.each do |tag| %>