This 1px transparent GIF encoded with base64 is the perfect placeholder image if you are looking for a really tiny image to replace when the page is loaded. I just found it on google myactivity page source code but it is also available on Github Gist.
data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
Sample Usage
- First add the following code to your page:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="468" height="90" data-src="my-large-picture-to-replace.jpg" />
- When the page load is complete simply replace src with data-src:
<script> /* On document load */ document.onreadystatechange = function(){ if (document.readyState == "interactive") { /* Replace all image sources */ ir = document.querySelectorAll("img[data-src]"); for(i=0;i<ir.length;i++){ ir[i].src = ir[i].getAttribute("data-src"); } } } </script>
I created a quick manual replacement script here. If you like, you can also use javascript frameworks like angular or reactjs to handle the replacements.
References
- https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready
- https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag/24835209
- https://www.w3schools.com/jsref/met_element_getattribute.asp
- https://gist.github.com/while0pass/661069/