Auto Defer Images in Blogger And Wordpress

programming javascript , wordpress , blogger , blogging

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

Auto Defer Images in Blogger And Wordpress

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>

Gallery - Auto Defer Images in Blogger And Wordpress