psxninja · August 12, 2021 21:05
diff --git a/lazy-load-banner-vtex.html b/lazy-load-banner-vtex.html
 <!-- placeholder svg and converter to data:image -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 798" width="1920" height="798" xml:space="preserve"></svg>

 <!-- transparent data:image -->
 <!-- data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw== -->

 <style>
 	/*<![CDATA[*/
 	/*###lazyload banner###*/
 	.banner-principal {
 		position: relative;
 		width: 100%;
 		float: left;
 		background: #eee;
 	}
 	.banner-principal>div>div {
 		position: absolute;
 		top: 0;
 		left: 0;
 		display: block;
 		width: 100%;
 		height: 100%;
 		z-index: 2;
 	}
 	.banner-principal img {
 	    width: 100%;
 	    height: auto;
 	}
 	.banner-principal .mob {display:none;}
 	@media (max-width: 767px) {
 		.banner-principal .desk {display:none;}
 		.banner-principal .mob {display:block;}
 	}
 	.b-desk:not(.slick-initialized) .box-banner~.box-banner,
 	.b-mob:not(.slick-initialized) .box-banner~.box-banner {
 		display: none;
 	}
 	/*###lazyload banner###*/
 	/*]]>*/
 </style>

 <div class="banner-principal" style="position:relative;">
 	<div class="desk">
 		<img class="lazyload-banner" width="1920" height="550" alt="Loading"
 			src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDU1MCIgd2lkdGg9IjE5MjAiIGhlaWdodD0iNTUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48L3N2Zz4=" />
 		<div class="b-desk"></div>
 		<noscript class="desk-content">
 			<vtex:contentPlaceHolder id="BannerDesktop" />
 		</noscript>
 	</div>
 	<div class="mob">
 		<img class="lazyload-banner" width="640" height="560" alt="Loading"
 			src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTYwIiB3aWR0aD0iNjQwIiBoZWlnaHQ9IjU2MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PC9zdmc+" />
 		<div class="b-mob"></div>
 		<noscript class="mob-content">
 			<vtex:contentPlaceHolder id="BannerMobile" />
 		</noscript>
 	</div>
 </div>

 <script>
 	/*<![CDATA[*/(function () {
 	var W = window, D = W.document, Q = 'querySelector',
 		di = "data:image/gif;base64,R0lGODlhAQABAIAAAOvr6wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==",
 		a = W.outerWidth ||
 			W.innerWidth ||
 			D.documentElement.clientWidth ||
 			D.body.clientWidth,
 		x = 0,
 		t = null,
 		r = /<img.*?>/gi,
 		s = /src="(.*?)"/gi,
 		im = 'data-lazy="$1" src="' + di + '"',
 		b = D[Q]('.banner-principal');
 	501 > a
 		? (
 			t = b[Q]('.mob-content').textContent,
 			t = t.replace(r, function (str) {
 				x += 1; return x === 1 ? str : str.replace(s, im);
 			}), b[Q]('.b-mob').innerHTML = t
 		) : (
 			t = b[Q]('.desk-content').textContent,
 			t = t.replace(r, function (str) {
 				x += 1; return x === 1 ? str : str.replace(s, im);
 			}), b[Q]('.b-desk').innerHTML = t
 		);
 	})();/*]]>*/
 </script>