Deferring images for faster pages & Better Page Speed Score

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

function init() {

var imgDefer = document.getElementsByTagName('img');

for (var i=0; i<imgDefer.length; i++) {

if(imgDefer[i].getAttribute('data-src')) {

imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));

} } }

window.onload = init;

</script>

This simple trick that I got from here helped me speed up the loading time of a page really nice…

I use this trick only on the hidden images that I call via JavaScript/jQuery or to the images that normally don’t show up on the main screen(located at the middle and the bottom of the page…