Defering Image is a technique to make image webpage load faster with dummy image. After page loaded we replace dummy image with desire image through javascript.
we use data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= for dummy image since it represent hexadecimal code for image which is much faster than real image.
HTML
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="my_image.png" alt=""/>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="my_image.png" alt=""/>
JS
<script>
function go()
{
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'));
}
}
}
$(document).ready(function(){
go();
}); </script>
<script>
function go()
{
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'));
}
}
}
$(document).ready(function(){
go();
}); </script>