Merge branch 'pr-34558' into 2.4-develop-prs

Author: ishakhsuvarov

app/code/Magento/Catalog/view/base/web/template/product/list/columns/image.html

@@ -9,6 +9,7 @@
        attr="href: $row().url">
         <img if="imageExists($row())"
              class="product-image-photo"
+             loading="lazy"
              attr="src: getImageUrl($row()),
                alt: getLabel($row()),
                title: getLabel($row()),

app/code/Magento/Catalog/view/base/web/template/product/list/columns/image_with_borders.html

@@ -13,6 +13,7 @@
             <span class="product-image-wrapper"
                   data-bind="style: {'padding-bottom': getHeight($row())/getWidth($row()) * 100 + '%'}">
                 <img class="product-image-photo"
+                     loading="lazy"
                      data-bind="attr: {src: getImageUrl($row()),
                                        alt: getLabel($row()), title: getLabel($row())}" />
             </span>

app/code/Magento/Catalog/view/frontend/web/template/product/image.html

@@ -4,4 +4,4 @@
  * See COPYING.txt for license details.
  */
 -->
-<img class="photo image" data-bind="attr: {src: src, alt: alt}, style: {width: width + 'px', height: height + 'px'}" />
+<img class="photo image" loading="lazy" data-bind="attr: {src: src, alt: alt}, style: {width: width + 'px', height: height + 'px'}" />

app/code/Magento/Catalog/view/frontend/web/template/product/image_with_borders.html

@@ -5,7 +5,7 @@
  */
 -->
 <span class="product-image-container" data-bind="style: {width: width/2 + 'px'}">
-    <span class="product-image-wrapper"  data-bind="style: {'padding-bottom': height/width*100 + '%'}">
-        <img class="product-image-photo" data-bind="attr: {src: src, alt: alt}, style: {width: 'auto', height: 'auto'}" />
+    <span class="product-image-wrapper" data-bind="style: {'padding-bottom': height/width*100 + '%'}">
+        <img class="product-image-photo" loading="lazy" data-bind="attr: {src: src, alt: alt}, style: {width: 'auto', height: 'auto'}" />
     </span>
 </span>

app/code/Magento/Checkout/view/frontend/web/template/summary/item/details/thumbnail.html

@@ -8,6 +8,6 @@
       data-bind="attr: {'style': 'height: ' + getHeight($parents[1])/2 + 'px; width: ' + getWidth($parents[1])/2 + 'px;' }">
     <span class="product-image-wrapper">
         <img
-            data-bind="attr: {'src': getSrc($parents[1]), 'width': getWidth($parents[1]), 'height': getHeight($parents[1]), 'alt': getAlt($parents[1]), 'title': getAlt($parents[1]) }"/>
+            data-bind="attr: {'src': getSrc($parents[1]), 'width': getWidth($parents[1]), 'height': getHeight($parents[1]), 'alt': getAlt($parents[1]), 'title': getAlt($parents[1]) }" loading="lazy"/>
     </span>
 </span>

app/code/Magento/Ui/view/base/web/templates/dynamic-rows/cells/thumbnail.html

@@ -4,4 +4,4 @@
  * See COPYING.txt for license details.
  */
 -->
-<img class="admin__control-thumbnail" style="max-height: 75px; max-width: 75px;" data-bind="attr: {src: $data.value}"/>
+<img class="admin__control-thumbnail" style="max-height: 75px; max-width: 75px;" data-bind="attr: {src: $data.value}" loading="lazy"/>

app/code/Magento/Ui/view/base/web/templates/grid/cells/thumbnail.html

@@ -6,6 +6,6 @@
 -->
 <span class="thumbnail-container">
     <span class="thumbnail-wrapper">
-        <img class="admin__control-thumbnail" attr="src: $col.getSrc($row()), alt: $col.getAlt($row())"/>
+        <img class="admin__control-thumbnail" attr="src: $col.getSrc($row()), alt: $col.getAlt($row())" loading="lazy"/>
     </span>
 </span>

app/code/Magento/Ui/view/base/web/templates/grid/cells/thumbnail/preview.html

@@ -7,7 +7,7 @@
 
 <div class="thumbnail-preview" data-role="thumbnail-preview">
     <div class="thumbnail-preview-image-block">
-        <img class="thumbnail-preview-image" src="<%- src %>" alt="<%- alt %>" />
+        <img class="thumbnail-preview-image" src="<%- src %>" alt="<%- alt %>" loading="lazy"/>
     </div>
     <div class="thumbnail-preview-content">
         <a class="thumbnail-preview-link" href="<%- link %>"><%- linkText %></a>