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

Auto Defer Images

Understanding async attributes

Auto Defer Images in Blogger And Wordpress | WMI - https://res.cloudinary.com/dimaslanjaka/image/fetch/https://caolan.github.io/async/img/async-logo.svg

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 | WMI - https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSOQ9W1otjsQ-LxNEXhnenfy4-qfOFktBbjxRg6TbNJ6t5mOCPMgSQuh3YJ

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.
Auto Defer Images in Blogger And Wordpress | WMI - https://res.cloudinary.com/dimaslanjaka/image/fetch/https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSuCFlmh3dKxBlbOltbtPaBgihRSM9AMj9Vw1ZH8z-xO2Jnikpu
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>