This scripts loads images asynchronously to stop render blocking images:
Notice the src tag is a spinning loader gif and the real image src tag has been renamed to data-src.
Just above the closing body tag:
P.S. I had problems with the CDN minifying the script and messing up recognizing the window.init event so I needed to add data-cfasync="false" the the script attribute.
Notice the src tag is a spinning loader gif and the real image src tag has been renamed to data-src.
Code:
<img src="graphics/00000001/loading.gif" data-src="&mvt:global:subcat_title:image;" alt="&mvt:subcat:name;" class="img-responsive">
Code:
<script type="text/javascript"> window.addEventListener('load', function(){ var allimages= document.getElementsByTagName('img'); for (var i=0; i<allimages.length; i++) { if (allimages[i].getAttribute('data-src')) { allimages[i].setAttribute('src', allimages[i].getAttribute('data-src')); } } }, false) </script>
Comment