Intersection Observer - Manipulación del DOM

src/index.js

@@ -1,7 +1,4 @@
-/**
- * This file is just a silly example to show everything working in the browser.
- * When you're ready to start on your site, clear the file. Happy hacking!
- **/
+import { registerImage } from "./lazy";
 
 const min = 1;
 const max = 122;
@@ -21,14 +18,13 @@ const createImageNode = () => {
   return container;
 };
 
-const nuevaImagen = createImageNode();
 const mountNode = document.getElementById("images");
-
 const addButton = document.querySelector("button");
 
 const addImage = () => {
   const newImage = createImageNode();
   mountNode.appendChild(newImage);
+  registerImage(newImage);
 };
 
 addButton.addEventListener("click", addImage);

src/lazy.js

@@ -0,0 +1,20 @@
+const isIntersecting = (entry) => {
+  return entry.isIntersecting; // True -> dentro de la pantalla
+};
+
+const accion = (entry) => {
+  const nodo = entry.target;
+  console.log("que fue manito");
+
+  // Cuando ya cargó la imagen desregistra.
+  observer.unobserve(nodo);
+};
+
+// Entries -> Todos los elemento que está observando.
+const observer = new IntersectionObserver((entries) => {
+  entries.filter(isIntersecting).forEach(accion);
+});
+
+export const registerImage = (imagen) => {
+  observer.observe(imagen);
+};