Auto Defer Images in Blogger And Wordpress

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

Auto Defer Images

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>

Subscribe to receive free email updates:

0 Response to "Auto Defer Images in Blogger And Wordpress"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.