How to Make Cool Loading Effects Before Blog Images Appear - hyderabadrichest

How to Make Cool Loading Effects Before Blog Images Appear

How to Make Cool Loading Effects Before Blog Images Appear

Starting from my curiosity about the loading effect on images (thumbnails) on several blogs, I also tried to find out how to make the image look like that with cool and stunning effects. Maybe you also often find views like that on large sites or popular blogs.

This loading effect usually appears on the blog homepage image, post page, or widgets that display the thumbnail (image) of the blog post. Some are in the form of animations such as rotating circles, falling boxes, moving text, hourglass, and so on. How it works, this loading effect will appear when the image is about to appear when the page is scrolled down, or in other words it appears before the image is successfully loaded.

After I learned about how to install lazy load on images to increase blog loading speed, I just found out that this loading effect can be created simultaneously with lazy load installation, because the function of lazy load itself is basically to delay the display of images before loading or before the page is scrolled. So in essence, the loading effect on this image can be added when installing lazy load for images.

How to Make Cool Loading Effects Before Blog Images Appear?

1. Open your blogger account. 

2. Select the theme menu and click edit html. 

3. Look for the </body>  code and place the following code above it. 

 <script>  
// <! [CDATA [
// LazyLoad
function loadScript (d) {var o = document.createElement ("script"); o.src = d, document.body.appendChild (o)} function downloadJSAtOnload () {loadScript ("https://cdn.jsdelivr.net /gh/Arlina-Design/phantom@master/lazyarlinas.js"))window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent"?window.attachEvent("onload",downloadJSAtOnload,!1):window.attachEvent"?window.attachEvent( window.onload = downloadJSAtOnload;
//]]>
</script>

4. Next, install lazy load on the html image at the same time to add the loading effect.

Still in the html template, please find some code: For example like this in the box
 <img expr: alt = 'data: post.title' expr: src = 'data: post.firstImageUrl' expr: title = 'data: post.title' itemprop = 'image' />  

If you have found it, please:

  • add class = 'lazy' after the <img ... code 
  • change the src code to data-src
  • add the code below to make the loading effect:
 src = 'https: //flevix.com/wp-content/uploads/2020/01/Preloader.gif'   

If it has been applied, the result will be like this:
 <img class = 'lazy' expr: alt = 'data: post.title' expr: data-src = 'data: post.firstImageUrl' expr: title = 'data: post.title' itemprop = 'image' src = ' https://flevix.com/wp-content/uploads/2020/01/Preloader.gif ' />  

If you have your own loading animated image, you can replace the link above (marked in red) with your own gif image link. Or you also search via google search, there are many animated images for loading effects that you can use. An example can visit this link.

Oh yes, if you find the image code already has a class, for example, like the following:
 <img class = 'image' expr: src = 'data: postFirstImage' />  

Then just add lazy behind it, so it becomes:
 <img class = 'image lazy ' expr: data-src = 'data: postFirstImage' src = 'https: //flevix.com/wp-content/uploads/2020/01/Preloader.gif'/>   

For information, there may be a lot of  <img  code in the html template so you can also apply the method above to the image html for image widgets such as popular posts, related posts, and others.

5. Save back your template and see the results.

Other Ways

If you feel complicated with the method above, there are other ways that are more practical and automatic. Enter edit html look for the </body> code and just place the following code above it. 

 <script type = 'text / javascript'>  
// <! [CDATA [
// Lazy Load
(function (a) {a.fn.lazyload = function (b) {var c = {threshold: 0, failurelimit: 0, event: "scroll", effect: "show", container: window}; if (b) {a.extend (c, b)} var d = this; if ("scroll" == c.event) {a (c.container) .bind ("scroll", function (b) {var e = 0; d.each (function () {if (a.abovethetop (this, c) || ​​a.leftofbegin (this, c)) {} else if (! a.belowthefold (this, c) &&! a.rightoffold (this , c)) {a (this). trigger ("appear")} else {if (e ++> c.failurelimit) {return false}}}); var f = a.grep (d, function (a) {return ! a.loaded}); d = a (f)})} this.each (function () {var b = this; if (undefined == a (b) .attr ("original")) {a (b ) .attr ("original", a (b) .attr ("src"))) if ("scroll"! = c.event || undefined == a (b) .attr ("src") || c .placeholder == a (b) .attr ("src") || a.abovethetop (b, c) || ​​a.leftofbegin (b, c) || ​​a.belowthefold (b, c) || ​​a.rightoffold (b, c)) {if (c.placeholder) {a (b) .attr ("src", c.placeholder)} else {a (b) .removeAttr ("src")} b.loaded = false } else {b.loaded = true} a (b) .one ("appear", function () {if (! this.loaded) {a ("<img />"). bind ("load", function ( ) (a (b) .hide (). attr ("src", a (b) .attr ("original")) [c.effect] (c.effectspeed); b.loaded = true}). attr ( "src", a (b) .attr ("original"))}}); if ("scroll"! = c.event) {a (b) .bind (c.event, function (c) {if ( ! b.loaded) {a (b) .trigger ("appear")}})}); a (c.container) .trigger (c.event); return this}; a.belowthefold = function (b, c) {if (c.container === undefined || c.container === window) {var d = a (window) .height () + a (window) .scrollTop ()} else {var d = a (c.container) .offset (). top + a (c.container) .height ()) return d <= a (b) .offset (). top-c.threshold); a.rightoffold = function (b , c) {if (c.container === undefined || c.container === window) {var d = a (window) .width () + a (window) .scrollLeft ()} else {var d = a (c.container) .offset () .left + a (c.container) .width ()} return d <= a (b) .offset (). left-c.threshold); a.abovethetop = function (b, c) {if (c .container === undefined || c.container === window) {var d = a (window) .scrollTop ()} else {var d = a (c.container) .offset (). top} return d> = a (b) .offset (). top + c.threshold + a (b) .height ()}; a.leftofbegin = function (b, c) {if (c.container === undefined || c. container === window) {var d = a (window) .scrollLeft ()} else {var d = a (c.container) .offset (). left} return d> = a (b) .offset (). left + c.threshold + a (b) .width ()}; a.extend (a.expr [":"], {"below-the-fold": "$. belowthefold (a, {threshold: 0, container: window}) "," above-the-fold ":"! $. belowthefold (a, {threshold: 0, container: window}) "," right-of-fold ":"$ .rightoffold (a, {threshold: 0, container: window}) "," left-of-fold ":"! $. rightoffold (a, {threshold: 0, container: window}) "})}) ( jQuery); $ (function () {$ ("img"). lazyload ((placeholder: "https://flevix.com/wp-content/uploads/2020/01/Preloader.gif ", effect:" fadeIn ", threshold:" - 50 "})});
//]]>
</script>

After saving, the result will be the same as the first method above. Please, you can choose one of the two methods above to install it on your blog.

That's the tutorial this time on how to create a cool loading effect before loading images on a blog. In addition to the blog being cooler because of the loading effect, your blog's speed score will also increase by applying this tutorial. Hope it is useful.

Show Comments
Hide Comments

0 Response to "How to Make Cool Loading Effects Before Blog Images Appear"

Post a comment

Top Ad Articles

Top Ad Articles

Top Ad Articles 2

Advertise Articles