1 2 3 4 5 6 7 8 9 10 |
<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> |
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…