How to Install Lazy Load and Slash Animation on Blogger

Setting the header expires or browser caching leverage, is already a common problem for Blogger users. To overcome it even then is very difficult, but it really can not be overcome. Because Blogger is a Google product, our status is just non-existent, and of course, we can't set it ourselves.

What is cache?

When visitors first open your blog, the browser will make several requests to download all content from the blog. in short, the file was stored in the visitor's browser cache. So that when the blog visitor visits your blog again, all the files downloaded earlier will be called from the browser cache.

This will obviously lighten up your blog because the browser does not need to constantly request files to the server. How long the cache is stored in the browser, you can set it yourself. The files that need to be set the cache are jpg / png / gif image, Favicon / ico, CSS, and HTML.

That's ideally and that's only done on blogs/websites that have their own hosting.

Because this is Blogger, you CANNOT set the header and separately control the browser cache. Then every blog visitor visits your blog, then the browser will immediately re-download all data files directly from the server.

It certainly will require a long time or loading. One of the factors that cannot get an A (100%) score is the issue of this header expires.

Don't be sad because you can use Lazy Load Image Script for Blogger. By installing this on your blog, your page speed will increase and your website loading will be faster. Check out how to install it below.

What is the Image Lazy Load Script?

Is a script that delays calling files before doing the next activity. And for this tutorial we will use the file call will be delayed before the page scrolling is done.

In easy words, Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser's viewport. This means that if users don't scroll all the way down, images placed at the bottom of the page won't even be loaded.

How to Install Lazy Load Image and Loading Slash on a Blog

1. Login to Blogger, Enter to THEME, Then Select EDIT HTML.
2. Look for the HTML Image Tag Code <img> which is the code from the blog thumbnail. every blog must be different, if the code like this. And certainly a little similar.

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

3. If so, consider both the following ways.
~ Add class='lazy' to the image tag.
~ Change expr:src to expr:data-src.
~ Add src and its value condition with data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII= (This src value is different from other tutorials, so if the loading animation wants to run please replace it with this value)

And the result is like this

  <img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>

4. This is the main part, Lazy Load Image Script. Save the Code above </body>

<script type='text/javascript'>//<![CDATA[
function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>

5. Then we add the loading animation. Put the code below above ]]></b:skin> or </style>

.lazy {animation: ignielShine 1.5s linear infinite;-moz-animation: ignielShine 1.5s linear infinite;/*-webkit-animation: ignielShine 1.5s linear infinite;*/-o-animation: ignielShine 1.5s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;}
.Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
@keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@-webkit-keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@-moz-keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@-webkit-keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@-moz-keyframes ignielZoom{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes ignielFade{from{opacity:0}to{opacity:1}}@-webkit-keyframes ignielFade{from{opacity:0}to{opacity:1}}@-moz-keyframes ignielFade{from{opacity:0}to{opacity:1}}@keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-webkit-keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes ignielGradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@-webkit-keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@-moz-keyframes ignielWobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}@keyframes ignielShine{0%{background-position:-468px 0}100%{background-position:468px 0}}

6. Save the Theme and see the results

It doesn't have to be a thumbnail image. As long as there is an image tag<img>, it can be added.

Live DemoVisit this site and see the live effect

That's all about, How to Install Lazy Load and Slash Animation on Blogger. hopefully, this will be useful. Greetings and thank you.