image lazyload with effect

by Sreeraj Saseendran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<img src="https://staging2.zimmermannwear.com/static/version1607359235/frontend/tryzens/zimmermann/en_AU/Magefan_LazyLoad/images/pixel.jpg" width="300" height="250" class="changeSrc" />
<button class="btn1">
click here
</button>
<button class="btn2">
click here2
</button>

CSS

img {
      transition: opacity 2s ease;
    -webkit-transition: opacity 2s ease;
    -moz-transition: opacity 2s ease;
    opacity: .8;
}
.loaded {
  opacity:1;
}

JavaScript

let asd='https://staging2.zimmermannwear.com/media/wysiwyg/4/0/404-new.jpg';
let asd1='https://staging2.zimmermannwear.com/static/version1607359235/frontend/tryzens/zimmermann/en_AU/Magefan_LazyLoad/images/pixel.jpg';
jQuery(".btn1").click(function(){
	jQuery('.changeSrc').attr('src',asd);
  jQuery('.changeSrc').addClass('loaded');
});
jQuery(".btn2").click(function(){
	jQuery('.changeSrc').attr('src',asd1);
});