优化首页轮播图

app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml

@@ -79,7 +79,10 @@
                 this._obj.init = function(){
                     var str = ``;
                     for(var i=0;i<this.img.length;i++){
-                        str += `<a href="${this.href[i]}"><img loading="lazy" src="${this.img[i]}"></a>`
+                        str += `<a href="${this.href[i]}"><picture>
+  <source media="(max-width: 768px)" srcset="${this.img[i][1]}" />
+  <source media="(min-width: 769px)" srcset="${this.img[i][0]}" />
+  <img src="${this.img[i][0]}" loading="lazy" /></picture></a>`
                     }
                     that.html(`<div class="imgbox">${str}</div>`).css({
                         "width":"100%",
@@ -224,10 +227,9 @@
                 }
             }
 
-            var img_arr =  ["/media/carousel/pc/1.jpg", "/media/carousel/pc/2.jpg"];
-            if (isMobile()) {
-                img_arr =  ["/media/carousel/mobile/1.jpg", "/media/carousel/mobile/2.jpg"];
-            }
+            var img_arr =  [["/media/carousel/pc/1.jpg","/media/carousel/mobile/1.jpg"],
+                ["/media/carousel/pc/2.jpg","/media/carousel/mobile/2.jpg"] ];
+
             $(".banner1").banner({
                 img: img_arr,
                 href: ["/collections/shapewear", "/collections/shapewear"],
@@ -239,25 +241,6 @@
                 index: 0
             });
         });
-
-        function isMobile() {
-            var userAgentInfo = navigator.userAgent;
-            var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
-            var mobile_flag = false;
-            for (var v = 0; v < mobileAgents.length; v++) {
-                if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
-                    mobile_flag = true;
-                    break;
-                }
-            }
-            var screen_width = window.screen.width;
-            var screen_height = window.screen.height;
-            if(screen_width < 500 && screen_height < 800){
-                mobile_flag = true;
-            }
-            return mobile_flag;
-        }
-
         window.onscroll = function (){
             var top = document.getElementById("topBtn");
             if (document.documentElement.scrollTop > 200 || document.body.scrollTop > 200){

app/design/frontend/Joshine/breeze/Magento_Theme/templates/html/header/logo.phtml

@@ -25,7 +25,7 @@ $logoHeight = $logoSizeResolver !== null && $logoSizeResolver->getHeight()
         href="<?= $block->escapeUrl($block->getUrl('')) ?>"
         title="<?= $block->escapeHtmlAttr($storeName) ?>"
         aria-label="store logo">
-    <img alt="Loading..." data-src="<?= $block->escapeUrl($block->getLogoSrc()) ?>" src="<?= $block->escapeUrl($block->getLogoSrc()) ?>"
+    <img loading="lazy" src="<?= $block->escapeUrl($block->getLogoSrc()) ?>"
          title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
          alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
         <?= $logoWidth ? 'width="' . $block->escapeHtmlAttr($logoWidth) . '"' : '' ?>

app/etc/di.xml

@@ -1898,6 +1898,7 @@
                 <item name="title" xsi:type="string">title</item>
                 <item name="border" xsi:type="string">border</item>
                 <item name="id" xsi:type="string">id</item>
+                <item name="loading" xsi:type="string">loading</item>
             </argument>
             <argument name="attributesAllowedByTags" xsi:type="array">
                 <item name="a" xsi:type="array">