How to add lazy load effect in blogger images to speed up your blog loading speed - If you have a great blog with bulky content, then the lazy load effect is great for your blog. The reason I'm telling you because if you have too many content in one single page, then your blog will take some time to load. However, if you set up the lazy load effect on your blog, then it will help you to decrease the loading time. Yes' because it will never load the whole page at the same time it will load the page when you scroll down the page. So today with the help of this post we are going to learn how we can easily set up a lazy image load effect into your blogger. If you want to add this effect into your blog, then follow the below simple steps.
How To Add Lazy Lode Effect In Blogger?
First you will need to go to your blogger dashboard - Login
Now go to the"Template" section and then click on the"Edit html" button to make some changes.
After that, find the below code by pressing "Ctrl + F" key together from your keyboard.
</body>
Now copy the below jQuery script and paste it just before </body>.
<script type='text/javascript'>
//<;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo5RhKMc-RsbC78UJ_wQEsCLjGFjX_LGdzqGGwGWWEvD6az2nWe7HqzC_jw4qL_NLy_PBsby6oM9ZJ4dO_uIKChtOhKwXLDaQ3inUVKfsOtg-0FP_UoZ_weUa6RBctbPTesmjZafZU1PRk/s1600/Askwithloud.com.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Now click on the orange save template button and refresh your blog to see the magic.
Please Read This
This effect doesn't work if JavaScript is disabled on your browser.
This effect doesn't work on some custom templates.
That's it! I hope you like this effect! Stay tuned for mode blogger widgets, tips and tricks! Thanks for reading @Prince.
0 Comment to "jQuery Lazy Image Load Effect For Blogger"
Post a Comment