Simple Image Lazy Load and Fade

1.md

Simple Image Lazy Load and Fade

• https://davidwalsh.name/lazyload-image-fade

2.html

<!-- Give it a fade -->

<style type="text/css">
	.thumbnail img{opacity: 1;transition: opacity 0.3s;}
	.thumbnail img[data-src]{opacity: 0;}
</style>

<!-- Get that JS working -->

[%site_value id:'footer_javascript'%]
	<script type="text/javascript" language="javascript">
	$(document).ready(function(){
		[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
			img.setAttribute('src', img.getAttribute('data-src'));
			img.onload = function() {
				img.removeAttribute('data-src');
			};
		});	
	});
	</script>
[%/site_value%]

<!-- The image -->
<img data-src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" class="product-image" alt="[@model@]" rel="itmimg[@SKU@]">