{"id":28825,"date":"2024-04-27T03:30:14","date_gmt":"2024-04-27T02:30:14","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/optimiza-tu-web-con-intersection-observer-dinamismo-y-eficacia\/"},"modified":"2024-06-03T17:42:44","modified_gmt":"2024-06-03T16:42:44","slug":"optimiza-tu-web-con-intersection-observer-dinamismo-y-eficacia","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/","title":{"rendered":"Optimize your Website with Intersection Observer: Dynamism and Efficiency"},"content":{"rendered":"<p>In the world of web development, one of the keys to improving user experience is optimizing content loading and ensuring that elements are visible only when they need to be. This not only improves page speed but also saves valuable resources for both the server and the end user. One of the most effective tools to achieve this is the Intersection Observer API. In this post, we will explore in depth how to implement this powerful API to control content visibility and dynamically load as needed.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#%C2%BFQue_es_Intersection_Observer\" >What is Intersection Observer?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Configurando_Intersection_Observer\" >Configuring Intersection Observer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Callback\" >Callback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Opciones\" >Options<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Ejemplo_Practico_Carga_diferida_de_imagenes\" >Practical Example: Lazy loading of images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Beneficios_de_Usar_Intersection_Observer\" >Benefits of Using Intersection Observer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Rendimiento_Mejorado\" >Improved Performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Experiencia_de_Usuario\" >User Experience<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Mantenimiento_y_Escalabilidad\" >Maintenance and Scalability<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-website-with-intersection-observer-dynamism-and-efficiency\/#Consideraciones_Finales\" >Final Considerations<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Intersection_Observer\"><\/span>What is Intersection Observer?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Intersection Observer is a JavaScript API that provides a way to execute callbacks asynchronously when an element enters or leaves the viewport, or intersects another element. This is particularly useful for things like lazy loading images, implementing navigation bars that change style as you scroll down the page, or any functionality that depends on element visibility.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Configurando_Intersection_Observer\"><\/span>Configuring Intersection Observer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To start using Intersection Observer, you first need to create an instance of the observer by specifying a callback that will be executed every time an observed element crosses a defined threshold:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let observer = new IntersectionObserver(callback, options);<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Callback\"><\/span>Callback<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>He <code>callback<\/code> It is executed every time the observed element enters or leaves the area defined by the thresholds. Receive a list of objects <code>IntersectionObserverEntry<\/code>, each of which contains information about the intersection state of an observed element.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Opciones\"><\/span>Options<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>options<\/code> are an object that specifies thresholds and root of the intersection area:<\/p>\n<ul>\n<li><strong>root<\/strong>: The element that is used as a viewport to check the visibility of the target. If not specified or if <code>null<\/code>, the document viewport is used.<\/li>\n<li><strong>rootMargin<\/strong>: Margin around <code>root<\/code>. It serves to expand or contract the area for intersection purposes.<\/li>\n<li><strong>threshold<\/strong>: A single number or an array of numbers indicating what percentage of the target must be visible before the <code>callback<\/code> be executed.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_Practico_Carga_diferida_de_imagenes\"><\/span>Practical Example: Lazy loading of images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#039;s implement lazy loading of images using Intersection Observer. This will cause images to only load when they are close to entering the viewport:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.addEventListener(&quot;DOMContentLoaded&quot;, function() { let lazyImages = [].slice.call(document.querySelectorAll(&quot;img.lazy&quot;)); let imageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach (function(entry) { if (entry.isIntersecting) { let image = entry.target; image.src = image.src.replace(&quot;\/lazy&quot;, &quot;&quot;); image.classList.remove(&quot;lazy&quot;); imageObserver.unobserve(image); } }); lazyImages.forEach(function(image) { imageObserve(image); });<\/code><\/pre>\n<p>In this script, all images with class &quot;lazy&quot; will be watched by <code>imageObserver<\/code>. When any of these images enter the viewport, the <code>callback<\/code> replaces your image URL to load the actual image, removes the &quot;lazy&quot; class and stops observing it to optimize resources.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Beneficios_de_Usar_Intersection_Observer\"><\/span>Benefits of Using Intersection Observer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Rendimiento_Mejorado\"><\/span>Improved Performance<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By controlling the loading and visibility of elements only when necessary, resource usage of both the user&#039;s device and the network is significantly reduced.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Experiencia_de_Usuario\"><\/span>User Experience<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lazy loading and other techniques that can be implemented with Intersection Observer improve the user experience, keeping the interface fluid and responsive.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mantenimiento_y_Escalabilidad\"><\/span>Maintenance and Scalability<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Code is easier to maintain and scale when using Intersection Observer, as it separates visibility and loading logic from user interface logic.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Consideraciones_Finales\"><\/span>Final Considerations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although Intersection Observer is incredibly useful, it is important to note that it is not supported in all older browsers. However, you can use polyfills to add compatibility to older browsers.<\/p>\n<p>Implementing Intersection Observer in your projects may initially seem intimidating, but the long-term benefits in performance and user experience are indisputable. I encourage you to experiment with this API and discover everything you can optimize in your web applications.<\/p>\n<p>If you need help implementing this technology on your website, do not hesitate to visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>. I&#039;m here to help you take your projects to the next level with the latest technologies in web development.<\/p>\n<p>Visit <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> for more resources and detailed guides on best practices in contemporary web development. Until next time!<\/p>","protected":false},"excerpt":{"rendered":"<p>In the world of web development, one of the keys to improving user experience is optimizing content loading and ensuring that elements are visible only when they need to be. This not only improves page speed, but also saves valuable resources for both the server and the web server.<\/p>","protected":false},"author":1,"featured_media":28826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[205,90,1780,1751,2205,1903,1902,884,1008,47],"class_list":["post-28825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-blog","tag-con","tag-dinamismo","tag-eficacia","tag-frontend","tag-intersection","tag-observer","tag-optimiza","tag-pruebas","tag-web"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28825"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28825\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28826"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}