Auto Defer Images in Blogger And Wordpress

jQuery Functions To Async Or Defer Images On Wordpress CMS And Blogger Blogs.

Understanding async attributes

Definition and Usage

The async attribute is a boolean attribute.
When present, it specifies that the script will be executed asynchronously as soon as it is available.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).

Understanding Defer Attribute

Definition and Usage

The defer attribute is a boolean attribute.
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Note: There are several ways an external script can be executed:

• If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
• If async is not present and defer is present: The script is executed when the page has finished parsing
• If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

This time I share auto defer images to wordpress and blogger.

Lets following tutorial:

This is builded from jQuery functions, it automatically generated base64 encoding. Then grabbing the "src" value to be encoded and put origins on "data-src".
Now I have 2 type codes for this two blog platforms (wordpress and blogger). I had included/maked "unminified" and "minified" of codes. Choose one them put in before the </ body> html tag.

Here's this code:

WordPress (unminified)

  <Script>

 $ ( "Img"). Each (function () {

 $ (This) .attr ( "Data-src", $ (this) .attr ( "src"));

 $ (This) .attr ( "src", the "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>

WordPress (minified)

  <Script> $ ( "img"). Each (function () {$ (this) .attr ( "Data-src", $ (this) .attr ( "src")); $ (this) .attr ( " src ", the" 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> 

Blogger (unminified)

  <Script type = "text / javascript">

 // <! [CDATA [

 $ ( "Img"). Each (function () {

 $ (This) .attr ( "Data-src", $ (this) .attr ( "src"));

 $ (This) .attr ( "src", the "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> 

Blogger (minified)

  <Script type = "text / javascript"> // <! [CDATA [$ ( "img"). Each (function () {$ (this) .attr ( "Data-src", $ (this) .attr ( "src")); $ (this) .attr ( "src", the "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>