How to Enable Lazy Loading Images on Blogger Website | ব্লগার ওয়েবসাইটে লেজি লোডিং চিত্রগুলি কীভাবে সক্ষম করবেন

How to Enable Lazy Loading Images on Blogger Website | ব্লগার ওয়েবসাইটে লেজি লোডিং চিত্রগুলি কীভাবে সক্ষম করবেন

আজকের এই আর্টিকেলে আমরা আপনাদেরকে ব্লগার ওয়েবসাইট এর জন্য Lazy Loading Image প্রবলেম এর সলিউশন কড়ে আপনাদেরকে দেখাবো এখানে আপনারা দেখতে পারবেন আপনাদের ওয়েবসাইটের জন্য ধীরে লোড হওয়া ছবিটি কিভাবে আপনারা ফাস্ট লোডিং হয়ে ইউসারকে দেখাতে পারবেন। কিভাবে করবেন সমস্ত কিছু আজকের আর্টিকেলে আপনাদের দেখাবো লাইভ।

Lazy Loading Image Problem Salve :  আপনাদের যদি আর্টিকেলে এই সমস্যা হয়েথাকে তাহলে এর সলিউকশন কিভাবে করবেন ? এই সমস্যা সকলের হয়ে থেকে কিভাবে সলিউশন করবেন এই প্রশ্নটা আপনাদের সকলের মনের মধ্যে আছে। এর জন্য আপনারা অনেক সময় গুগলে সার্চ করে থাকেন ইমেজ লোডিং স্পিড স্লো হলে গুগলে কিভাবে সার্চ করবেন কিন্তু তেমন কোন ভালো উত্তর আপনারা সেখান থেকে পান না। তাই আজকেরে আর্টিকেলে আপনাদের এই প্রশ্নের সমাধান নিয়ে এসেছি আমি।

 অনেক সময় আপনাদের আর্টিকেলটি ওপেন হতে একটু বেশি সময় লাগে সেই সময় আপনার একটু চিহ্নিত্রিত হয়ে যান অনেকে এভাবে যে আমাদের সাইটে লোডিং স্পিড কি কমে যাচ্ছে হ্যাঁ অবশ্যই আপনাদের সাইটে লোডিং স্পিড কমে যায় এই ইমেজ কোয়ালিটির জন্য এই সমস্যার সমাধান করার জন্য আপনাকে আমরা একটা Code দেবো যেটাকে আপনি আপনার ব্লগার সাইটের </body> tag এর ওপরে বসিয়ে Save করে দেবেন আপনার থিমের।

HTML

<script>

//<![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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfKjBVjbPfcex8ldSLclGYiXQ447HLImcIqQ72JfaW-DXSevfhY9MxO9iizVdQbZxMXkp1UIi4b5vIO6kwu_GxB24o1bQHRZurMxyTZfd15br6Je80dFOJxp5tfi433-O4-R_GUXBYiV6/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>

<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

তো বন্ধুরা আপনারা তো এবার বুঝতে পেরেছেন কিভাবে আপনারা আপনাদের ব্লগার ওয়েবসাইটের জন্য স্লো লোড হওয়া ইমেজের প্রবলেম থেকে রেহাই পাবেন এতে আপনার ওয়েবসাইটের ট্রাফিকের সংখ্যা বৃদ্ধি পাবে যেহেতু থাম্বেল একটা ইমপ্রেশন যোগায় আপনার আর্টিকেলটিকে তাই থাম্বেলের গুরুত্ব একটি পোস্ট রঙ করার জন্য কতটা হতে পারে আপনি হয়তো বুঝতে পারছেন আরে আর্টিকেলে আপনাদের যদি কোন প্রবলেম সলিউশন হয়ে থাকে অবশ্যই আপনারা আমাদের এই কমেন্ট বক্সে জানাবেন।