Deferring Images That Have Been Published

As we know that the image is one of the factors that caused the load on the loading blog. For that we have to really optimize the image so as not to overburden the blog.

And the trick is the most common and widely used to overcome this image loading one of them is jquery lazy loading. Well this time I will share a trick to overcome this image loading without using lazy loading plugins, but using a simple javascript. The principle is the same as the plugin lazy loading, but without including the calculation of the position of the scroll.

Author: Adhy Suriady
Javascript is only to defer or delay the loading of the picture image and display it after all web element contained.
For this course, we need the help of jquery, finally !. But do not worry, this jquery small.

As explained in Feedthebot, this trick is actually manipulates the browser by using the image transparent deception in the form of a small dot with size 1px x 1px only 26 bytes to appear before all elements contained blog. And if all the elements successfully loaded the actual image will be displayed.

Usually an html image will be as follows:

<img src="your-image-here">

And using tricks defer this image we will make hoax html html image and we use the image as follows:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

Consider the following code from the code above:

src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

It was a ploy to ditampilan image browser before all elements contained blog. And javascript to display the actual image after all contained elements such as the following, please save the above code </body>

<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>

So what if we want to implement this trick on an existing image in a blog?

To implement the above trick for all images on the blog, we do not need to edit images one by one. We'll add the image hoax on an existing image and replace src on the original image into a data-src in order to defer his image javascript function. We will use a small jquery once to do so.

Please use the following script which I combine between jquery to add an image to a trick on an existing image and replace src on the original image into a data-src to defer javascript image. 

<script type='text/javascript'>
//<![CDATA[
$("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
//]]>
</script>

You only need to use the above script (code has been my Minify) and save the above code </body> and you do not need to do anything else and do things as usual when uploading or displaying a new image in the blog.

The above script will automatically add the image hoax on all the existing image and replace src on the original image into a data-src and redisplay the original image after all the elements contained blog.

P/S:  use jquery library in

Try to replace this

for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].removeAttribute("src"),imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));console.log(document.body.innerHTML);
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"))}};