• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
WPHindiGuide Best Hindi Blog

WpHindiGuide

Best Hindi Blog Website

  • How to
  • Make money online
  • Technology
  • Apps
  • Internet
  • Blogging
You are here: Home / Blogging / Blogger Website में Image Lazy Load Enable कैसे करें

Blogger Website में Image Lazy Load Enable कैसे करें

July 2, 2021 by Antesh Leave a Comment

क्या आप भी अपने blogspot ब्लॉग में image lazy load install करना चाहते है तो आप बिलकुल सही जगह पर है। आज इस आर्टिकल के जरिए मैं आपको ब्लॉगर ब्लॉग में lazy load ऑन करना सिखाऊंगा।

अगर आप अपने ब्लॉग की page loading speed improve करना चाहते है तो आपको Lazy Load Images setup करना होगा। इससे पोस्ट Image सिर्फ viewport में और user के scroll down करने पर ही load होगी। इससे आपकी ब्लॉग पहले से 30% से 40% fast load होगी।

Lazy load ब्लॉग को optimize करने का तरीका होता है जो website content को जरुरत के हिसाब से load करती है। मतलब जब विजिटर आपके पोस्ट को पढ़ता है तो पोस्ट में जितने भी इमेजेस होगी उसके जरूरत के हिसाब से show होगी। मतलब पोस्ट पढ़ने के लिए विजिटर जब स्क्रीन को स्क्रॉल करेगा तब इमेजेस लोड होगी और दिखाई देगी। इससे आपकी पेज लोडिंग स्पीड में सुधार होता है और आपकी साईट की performance अच्छी हो जाती है।

ब्लॉग मे image lazy loading क्यों लगाए

गूगल algorithm के अनुसार जिस ब्लॉग की पेज लोडिंग स्पीड फास्ट होती है वही ब्लॉग गूगल सर्च में ज्यादा रैंक करती है। किसी भी ब्लॉग के पेज लोडिंग स्पीड पर इमेजेस का बहुत बड़ा प्रभाव पड़ता है। अगर आप अपने पोस्ट में बहुत से इमेजेस यूज किए है तो वह आपके पेज लोडिंग स्पीड को slow कर देंगे।

इस स्थिति में आप image lazy loading का इस्तेमाल करके अपने ब्लॉग पेज लोडिंग को improve कर सकते है। उदाहरण के लिए, अगर आपने अपने पोस्ट में 10 images add किए है और जब विजिटर उस पोस्ट को open करेगा तो सभी 10 photos load होंगे, जिसमे time लगेगा, इससे page loading speed slow हो जाती है।

लेकिन अब अगर आप Lazy load technique का उपयोग करते हो तो page को open करने पर सिर्फ 1 image लोड होगा, और बाकि 9 इमेज user के scroll down करने पर load होगा।

तो चलिए अब मैं आपको बताता हु ब्लॉगर ब्लॉग में lazy loading कैसे ऑन करना है…

Blogger Website में Image Lazy Load Enable कैसे करें

Blogger Website में Image Lazy Load Enable कैसे करें
  • सबसे पहले अपने ब्लॉगर डैशबोर्ड में लॉगिन करे।
  • उसके theme ऑप्शन पर क्लिक करे।
  • उसके बाद customise के बगल में आइकन पर क्लिक करे।
  • उसके बाद Edit HTML पर क्लिक करे।
  • उसके बाद आप अपने कंप्यूटर कीबोर्ड में Ctrl +F दबाए। और सर्च बॉक्स में </body> लिखकर सर्च करे।
  • अब आप नीचे दिए गए स्क्रिप्ट कोड को कॉपी करके </body> के पहले paste करे।
<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://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

अधिक जानकारी के लिए आप इस वीडियो को देख कर अच्छे से समझ सकते है ब्लॉगर ब्लॉग में lazy load enable कैसे करते है।

उम्मीद करता हु इस आर्टिकल से आपकी जरूर मदद हुई होगी। अगर आपको ब्लॉगर ब्लॉग में lazy load enable करने में कोई दिक्कत आ रही हो तो आप मुझे कॉमेंट जरूर करे।

Filed Under: Blogging

About Antesh

Antesh Singh एक फुल टाइम ब्लॉगर है जो Make Money Online, आधार कार्ड और और टेक रिलेटेड आर्टिकल लिखना पसंद करते है।

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Post

  • Instagram Par Profile Photo Kaise Dekhe 2023
  • Facebook ID Ka Password Kaise Change Kare 2023
  • Bank Ka IFSC Code Kaise Pata Kare 2023
  • Paytm Visa Debit Card Apply Kaise Kare 2023
  • Facebook Se Number Kaise Nikale 2023
  • Amazon Me Mobile Number Kaise Change Kare 2023
  • Picsart Photo Editing Kaise Kare 2023
  • Airtel Thanks App Kya Hai Download Kaise Kare
  • Airtel Xstream App Kya Hai Download KAise Kare
  • GTA Vice City Kaise Download Karen

Footer

साइट के बारे में

wphindiguide इंडिया की बेस्ट हिंदी ब्लॉग है। इसपर Make Money Online, How To, Youtube और Tech रिलेटेड आर्टिकल पब्लिश की जाती है।

Sitelinks

  • Privacy Policy
  • Contact us
  • About
  • Sitemap

© 2016–2023 · WpHindiGuide · All Rights Reserved

Go to mobile version