When Should You Not Use Lazy Loading?

You have images above the fold
You have a store
Doing it only to fool pagespeed scores
You’ve got a CDN
Have only a few images on each page
You have a fast-loading website and strong server

How do you make a picture lazy load

Chrome and Firefox both support lazy-loading with the loading attribute. This attribute can be added to elements, and also to elements.</p> <p>A value of lazy tells the browser to load the image immediately if it is in the viewport, and to fetch other images when the user scrolls near them.</p> <h2>What is the benefit of lazy loading</h2> <p>The benefits of lazy loading include: <a href="https://www.techieheap.com/how-much-should-i-charge-for-user-generated-content/" target="_blank" rel="noopener">Reduces initial load time</a> – Lazy loading a webpage reduces <a href="https://www.techieheap.com/how-do-i-use-google-analytics-for-marketing/" target="_blank" rel="noopener">page weight</a>, allowing for a quicker page load time.</p> <p>Bandwidth conservation – Lazy loading conserves bandwidth by delivering content to users only if it’s requested.</p> <h2>What is the difference between lazy loading and <a href="https://www.tutorialspoint.com/entity_framework/entity_framework_eager_loading.htm" target="_blank" rel="noopener">eager loading</a></h2> <p>Lazy loading in Entity Framework is the default phenomenon that happens for loading and accessing the <a href="https://www.techieheap.com/what-are-the-5-steps-of-advertising/" target="_blank" rel="noopener">related entities</a>.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>However, eager loading is referred to the practice of force-loading all these relations.</p> <h2>Which is better lazy loading or eager loading</h2> <p>Use Eager Loading when you are sure that you will be using related entities with the main entity everywhere.</p> <p>Use Lazy Loading when you are using one-to-many collections. Use Lazy Loading when you are sure that you are not using related entities instantly.</p> <h2>How do I enable lazy loading in WordPress without plugins</h2> <p>Update 11 Aug 2020: WordPress 5.5 introduced native lazy loading by adding loading=”lazy” attribute to all images.</p> <p>So you no longer need to create your own.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <h2>How do I know if my browser is lazy loading</h2> <p>There are many ways to check this out. In web developer tools look for file/component (for which lazy-loading is applied).</p> <p>If the file is present even before loading of the module then lazy loading is not working (component shouldn’t be visible before module is loaded).</p> <h2>What is lazy load Shopify</h2> <p>Lazy loading is a strategy to identify resources as non-blocking and load them only when needed.</p> <h3>Which browsers support lazy loading?</h3> <ul> <li>Chrome</li> <li>Edge * 12 – 18 supported</li> <li>Safari</li> <li>Firefox</li> <li>Opera</li> <li>IE</li> <li>Chrome for Android</li> <li>Safari on iOS * 3.2 – 13.3 supported</li> </ul> <h2>How does image lazy loading work</h2> <p>Lazy Loading defers the loading of an image that is not needed on the page immediately.</p> <p>An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually becomes visible.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>If the user never scrolls, an image that is not visible to the user never gets loaded.</p> <h2>How do I enable lazy loading in HTML</h2> <p>The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.</p> <p>Tip: Add loading=”lazy” only to images which are positioned below the fold.</p> <h2>Is lazy loading good for performance</h2> <p>Today, lazy loading is widely used in web applications to improve <a href="https://rabbitloader.com/kb/lazy-loading-of-adsense-ads/" target="_blank" rel="noopener">application performance</a>. It helps developers reduce loading times, optimize <a href="https://wpadvancedads.com/lazy-load-ads-page-speed/" target="_blank" rel="noopener">data usage</a> and improve the user experience.</p> <p>However, overusing lazy loading can affect the application performance negatively.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <h3>How do you lazy load iframes?</h3> <ul> <li>var iframe = document</li> <li>iframe</li> <li>document</li> </ul> <h2>What is React lazy loading</h2> <p>In essence, lazy loading means that a component or a part of code must get loaded when it is required.</p> <p>It is also referred to as code splitting and data fetching Talking about React specifically, it bundles the complete code and deploys all of it at the same time.</p> <h2>What is lazy loading components</h2> <p>Lazy loading is the technique used in optimizing your web and mobile apps, this works by rendering only needed or critical user interface items first, then quietly rendering the non-critical items later.</p> <p>As we build code components the application grows, and the bundle gets very cumbersome in size.</p> <h2>How do I load a div lazy</h2> <p>Add a loading=”lazy” attribute to the element that has an image background. Set a data-bg equal to the path of the image you want to load, making sure to include the url() syntax.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>You don’t need to add a background-image in your css file (the plugin will set it as inline style).</p> <h2>Does Lazyload affect SEO</h2> <p>Lazy loading images improves the user experience by saving bandwidth for important content first.</p> <p>Some reject the technique for SEO considerations. But properly lazy loading your images does not prevent them from being indexed.</p> <h2>What is lazy loading C#</h2> <p>Lazy loading is the process whereby an entity or collection of entities is automatically loaded from the database the first time that a property referring to the entity/entities is accessed.</p> <p>Lazy loading means delaying the loading of related data, until you specifically request for it.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <h2>What is routing and lazy loading</h2> <p>Lazy loading is a technology of angular that allows you to load JavaScript components when a specific route is activated.</p> <p>It improves application load time speed by splitting the application into many bundles.</p> <h2>What is eager load</h2> <p>Eager loading is the process whereby a query for one type of entity also loads related entities as part of the query.</p> <p>Eager loading is achieved by the use of the Include method. It means that requesting related data be returned along with query results from the database.</p> <h2>Does Google index lazy loading</h2> <p>Does Google index lazy loading? Google has repeatedly confirmed that it does index content that it can successfully render.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>This includes lazy load content.</p> <h2>Does Lazy Load improve page speed</h2> <p>Applying lazy loading to your page content has many potential advantages: It helps your page load faster.</p> <p>This improves the visitor experience, increases the number of engaged visitors and conversions, and helps your SEO.</p> <p>It reduces data usage since the browser loads a fraction of the total page content per visit.</p> <h2>What is lazy loading in Python</h2> <p>Lazy loading is just a fancy name given to the process of initializing a class when it’s actually needed.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>In simple words, Lazy loading is a software design pattern where the initialization of an object occurs only when it is actually needed and not before to preserve simplicity of usage and improve performance.</p> <h2>What is lazy loading in PHP</h2> <p>According to the definition, Lazy Load is a design pattern commonly utilized in programming and mostly in web design and development to defer the initialization of an object until the time at which it’s needed.</p> <h2>What is lazy loading in laravel</h2> <p>Dynamic relationship properties perform “lazy loading”, meaning they will only load their relationship data when you actually access them.</p> <p>Here we find “N + 1” query problem. suppose we have three users so N = $user =User->get() = 3 collections. foreach($users as $user){ $user->post; }</p> <h3>How does Shopify implement lazy load?</h3> <ul> <li>Step 1: Add the Lazy Load script to the Shopify store</li> <li>Step 2: Indicate the images to lazy load</li> <li>Step 3: Instantiate Lazy Load in your JS document</li> </ul> <h2>Which design pattern is used for lazy loading</h2> <p>There are four common ways of implementing the lazy load design pattern: lazy initialization; a virtual proxy; a ghost, and a value holder.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>Each has its own advantages and disadvantages.</p> <h3>What are the risks of lazy loading and how can you mitigate them?</h3> <ul> <li>If possible, do not lazy load routes that are most frequently visited by your users</li> <li>Keep your chunk sizes as small as possible (Only import what you need and keep shared modules as compact as possible)</li> </ul> <h2>What is lazy loading and why is it used for Angular</h2> <p>Lazy loading is the process of loading components, modules, or other assets of a website as they’re required.</p> <p>Since Angular creates a SPA (Single Page Application), all of its components are loaded at once.</p> <p>This means that a lot of unnecessary libraries or modules might be loaded as well.</p> <h2>How do I add lazy to WordPress</h2> <p>To enable lazy load in WordPress, go to the “Perfmatters” settings in your WordPress admin dashboard.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3634999250096065" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3634999250096065" data-ad-slot="9299099856" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p>Click on the “Lazy Loading” tab. There are a few different options you have when it comes to lazy loading.</p> <p>They can also be used together at the same time.</p> <h4>Sources</h4> <p><a href="https://web.dev/lazy-loading-images/" target="_blank" rel="noopener">https://web.dev/lazy-loading-images/</a><br /> <a href="https://www.wpbeginner.com/plugins/how-to-do-lazy-load-images-in-wordpress/" target="_blank" rel="noopener">https://www.wpbeginner.com/plugins/how-to-do-lazy-load-images-in-wordpress/</a><br /> <a href="https://imagekit.io/blog/lazy-loading-images-complete-guide/" target="_blank" rel="noopener">https://imagekit.io/blog/lazy-loading-images-complete-guide/</a><br /> <a href="https://css-tricks.com/lazy-loading-responsive-adsense-ads/" target="_blank" rel="noopener">https://css-tricks.com/lazy-loading-responsive-adsense-ads/</a></p> <div class="related-posts"> <h5>Related Posts</h5> <ol> <li><a href="https://www.techieheap.com/what-are-neuromarketing-strategies/" title="What Are Neuromarketing Strategies">What Are Neuromarketing Strategies</a></li> <li><a href="https://www.techieheap.com/how-do-i-use-google-analytics-for-marketing/" title="How Do I Use Google Analytics For Marketing?">How Do I Use Google Analytics For Marketing?</a></li> <li><a href="https://www.techieheap.com/what-are-the-5-steps-of-advertising/" title="What Are The 5 Steps Of Advertising?">What Are The 5 Steps Of Advertising?</a></li> <li><a href="https://www.techieheap.com/how-much-should-i-charge-for-user-generated-content/" title="How Much Should I Charge For User Generated Content">How Much Should I Charge For User Generated Content</a></li> <li><a href="https://www.techieheap.com/how-do-you-create-a-strategy-on-instagram/" title="How Do You Create A Strategy On Instagram?">How Do You Create A Strategy On Instagram?</a></li> <ol> </div>  </div> <section class="post-tags"><ul><li><h5 class="title-tags">Tags:</h5></li><li><a href="https://www.techieheap.com/tag/browser/" rel="tag">browser</a></li><li><a href="https://www.techieheap.com/tag/component/" rel="tag">component</a></li><li><a href="https://www.techieheap.com/tag/content/" rel="tag">content</a></li><li><a href="https://www.techieheap.com/tag/images/" rel="tag">images</a></li><li><a href="https://www.techieheap.com/tag/module/" rel="tag">module</a></li><li><a href="https://www.techieheap.com/tag/user/" rel="tag">user</a></li></ul></section> <section class="post-author"> <div class="authors-default"> <div class="author-wrap"> <div class="author"> <div class="author-avatar"> <a href="https://www.techieheap.com/author/admin/" rel="author"> <img alt='' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3C/svg%3E" data-lazy-srcset='https://secure.gravatar.com/avatar/627efb493170d9d521f902534bdba851?s=240&d=mm&r=g 2x' class='avatar avatar-120 photo' height='120' width='120' decoding='async' data-lazy-src="https://secure.gravatar.com/avatar/627efb493170d9d521f902534bdba851?s=120&d=mm&r=g"/><noscript><img alt='' src='https://secure.gravatar.com/avatar/627efb493170d9d521f902534bdba851?s=120&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/627efb493170d9d521f902534bdba851?s=240&d=mm&r=g 2x' class='avatar avatar-120 photo' height='120' width='120' decoding='async'/></noscript> </a> </div> <div class="author-description"> <h5 class="title-author"> <span class="fn"> <a href="https://www.techieheap.com/author/admin/" rel="author"> admin </a> </span> </h5> <p class="note"></p> </div> </div> </div> </div> </section> </div> </div> </article> </main> </div> <aside id="secondary" class="widget-area sidebar-area"> <div class="sidebar sidebar-1"> <div class="widget block-2 widget_block widget_search"><form role="search" method="get" action="https://www.techieheap.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></div><div class="widget categories-3 widget_categories"><div class="title-block-wrap"><h5 class="title-block title-widget">Categories</h5></div> <ul> <li class="cat-item cat-item-13"><a href="https://www.techieheap.com/category/css/" ><span class="icon" style="background-color:#DFFDFF"></span>CSS</a> </li> <li class="cat-item cat-item-40"><a href="https://www.techieheap.com/category/guides-tutorials/" ><span class="icon" style="background-color:#000000"></span>Guides & Tutorials</a> </li> <li class="cat-item cat-item-5"><a href="https://www.techieheap.com/category/javascript/" ><span class="icon" style="background-color:#FFEE93"></span>JavaScript</a> </li> <li class="cat-item cat-item-33"><a href="https://www.techieheap.com/category/programming/" ><span class="icon" style="background-color:#CBE896"></span>Programming</a> </li> <li class="cat-item cat-item-1"><a href="https://www.techieheap.com/category/python/" ><span class="icon" style="background-color:#AAC0AA"></span>Python</a> </li> <li class="cat-item cat-item-17"><a href="https://www.techieheap.com/category/sql/" ><span class="icon" style="background-color:#DFFDFF"></span>SQL</a> </li> </ul> </div> <div class="widget recent-posts-3 widget_recent_entries"> <div class="title-block-wrap"><h5 class="title-block title-widget">Recent Posts</h5></div> <ul> <li> <a href="https://www.techieheap.com/how-do-i-purchase-google-adwords/">How Do I Purchase Google AdWords?</a> </li> <li> <a href="https://www.techieheap.com/what-is-the-highest-paid-job/">What Is The Highest Paid Job</a> </li> <li> <a href="https://www.techieheap.com/does-instagram-help-seo/">Does Instagram Help SEO</a> </li> <li> <a href="https://www.techieheap.com/how-much-do-you-get-paid-for-a-sponsored-post/">How Much Do You Get Paid For A Sponsored Post</a> </li> <li> <a href="https://www.techieheap.com/what-are-social-media-backlinks/">What Are Social Media Backlinks</a> </li> </ul> </div> </div> <div class="sidebar sidebar-2"></div> </aside> </div> </div> </div> <footer id="colophon" class="site-footer"> <div class="footer-info"> <div class="cs-container"> <div class="site-info"> <div class="footer-col-info"> <span class="site-title footer-title" href="https://www.techieheap.com/" rel="home"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Techie Heap" data-lazy-src="https://www.techieheap.com/wp-content/uploads/2022/03/logo.png" ><noscript><img src="https://www.techieheap.com/wp-content/uploads/2022/03/logo.png" alt="Techie Heap" ></noscript> </span> <div class="footer-copyright"> @2022 techieheap.com </div> </div> </div> </div> </div> </footer> </div> </div> </div> <script> var _SEARCHWP_LIVE_AJAX_SEARCH_BLOCKS = true; var _SEARCHWP_LIVE_AJAX_SEARCH_ENGINE = 'default'; var _SEARCHWP_LIVE_AJAX_SEARCH_CONFIG = 'default'; </script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/basic-elements/block-alert/public-block-alert.js?ver=2.4.4.1" id="canvas-block-alert-script-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/basic-elements/block-collapsibles/public-block-collapsibles.js?ver=2.4.4.1" id="canvas-block-collapsibles-script-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/basic-elements/block-tabs/public-block-tabs.js?ver=2.4.4.1" id="canvas-block-tabs-script-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/posts/block-posts/colcade.js?ver=2.4.4.1" id="colcade-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/posts/block-posts/public-block-posts.js?ver=2.4.4.1" id="canvas-block-posts-script-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/justified-gallery/block/jquery.justifiedGallery.min.js?ver=2.4.4.1" id="justifiedgallery-js"></script> <script id="canvas-justified-gallery-js-extra"> var canvasJG = {"rtl":""}; </script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/justified-gallery/block/public-block-justified-gallery.js?ver=2.4.4.1" id="canvas-justified-gallery-js"></script> <script src="https://www.techieheap.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/slider-gallery/block/flickity.pkgd.min.js?ver=2.4.4.1" id="flickity-js"></script> <script id="canvas-slider-gallery-js-extra"> var canvas_sg_flickity = {"page_info_sep":" of "}; </script> <script src="https://www.techieheap.com/wp-content/plugins/canvas/components/slider-gallery/block/public-block-slider-gallery.js?ver=2.4.4.1" id="canvas-slider-gallery-js"></script> <script src="https://www.techieheap.com/wp-content/plugins/sight/render/js/jquery.magnific-popup.min.js?ver=1708432947" id="magnific-popup-js"></script> <script id="sight-block-script-js-extra"> var sight_lightbox_localize = {"text_previous":"Previous","text_next":"Next","text_close":"Close","text_loading":"Loading","text_counter":"of"}; </script> <script src="https://www.techieheap.com/wp-content/plugins/sight/render/js/sight.js?ver=1708432947" id="sight-block-script-js"></script> <script src="https://www.techieheap.com/wp-content/themes/squaretype/js/ofi.min.js?ver=3.2.3" id="object-fit-images-js"></script> <script id="csco-scripts-js-extra"> var csco_mega_menu = {"rest_url":"https:\/\/www.techieheap.com\/wp-json\/csco\/v1\/menu-posts"}; </script> <script src="https://www.techieheap.com/wp-content/themes/squaretype/js/scripts.js?ver=3.0.5" id="csco-scripts-js"></script> <script id="swp-live-search-client-js-extra"> var searchwp_live_search_params = []; searchwp_live_search_params = {"ajaxurl":"https:\/\/www.techieheap.com\/wp-admin\/admin-ajax.php","origin_id":14664,"config":{"default":{"engine":"default","input":{"delay":300,"min_chars":3},"results":{"position":"bottom","width":"auto","offset":{"x":0,"y":5}},"spinner":{"lines":12,"length":8,"width":3,"radius":8,"scale":1,"corners":1,"color":"#424242","fadeColor":"transparent","speed":1,"rotate":0,"animation":"searchwp-spinner-line-fade-quick","direction":1,"zIndex":2000000000,"className":"spinner","top":"50%","left":"50%","shadow":"0 0 1px transparent","position":"absolute"}}},"msg_no_config_found":"No valid SearchWP Live Search configuration found!","aria_instructions":"When autocomplete results are available use up and down arrows to review and enter to go to the desired page. Touch device users, explore by touch or with swipe gestures.","searchwp_live_search_client_nonce":"2e11dc6c9f"};; </script> <script src="https://www.techieheap.com/wp-content/plugins/searchwp-live-ajax-search/assets/javascript/dist/script.min.js?ver=1.8.2" id="swp-live-search-client-js"></script> <script>window.lazyLoadOptions = { elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { return; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { return; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://www.techieheap.com/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script></body> </html>