Cursos Empresas Blog Live Conf Eventos Precios

0:003:17

Comparte el resultado

Curso de Manipulación del DOM

Clase 25 de 29

Clase 25 / 29

Luis Alejandro Vera Hernandez

Hace 5 años

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-snowpack-app"
    />
    <!--
      Snowpack will replace %PUBLIC_URL% with the value you have for `baseUrl` in `snowpack.config.js`.
      Make sure to update it with your GitHub Page URL. https://<your-username>.github.io/<your-repo-name>

      More about config options:
      - https://www.snowpack.dev/reference/configuration#buildoptions.baseurl
    -->
    <link
      rel="stylesheet"
      type="text/css"
      href="%PUBLIC_URL%/_dist_/index.css"
    />
    <title>Random fox</title>
  </head>
  <body>
    <!--
      This HTML file is a template.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.

      Start modyfing from here.
    -->
    <div class="py-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center">
        <p
          class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase"
        >
          Manipulando el Dom
        </p>
        <h3
          class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
        >
          Random Fox
        </h4>
        <p class="m-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
          Manipulacion del DOM con API de <span> <a href="https://randomfox.ca/" target="_blank">RandomFox</a></span>
        </p>

        <button id="addButton" class="p-3">Agregar Imagen</button>
        <button id="removeButton" class="p-3">Remover Imagenes</button>
       
        <div id="images">
          
        </div>

        

      </div>
    </div>

    <!-- Add more scripts here -->
    <script type="module" src="%PUBLIC_URL%/_dist_/index.js"></script>
  </body>
</html>

index.js

/**
 * 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 URL = "https://randomfox.ca/images";

const maximum=122;
const minimum= 1;

//crea un numero aleatorio para traer las imagenes
const random = () => Math.floor(Math.random() * (maximum - minimum)) + minimum

// reporte en consola de cuantos argumentos han traido y estan cargados
const reportImgs = {
    imgLoaded: 0,
    totalImg: 0
}

const stopContentLoader = (event) => {
    const img = event.target;
    // img.parentElement.lastChild.remove();
    img.style.width = '320px';
    img.style.height= '320px';
    
    reportImgs.imgLoaded++;
    
    // debugger;
    showReportImg();
}

const showReportImg = () => {
    console.log('----------------------------------------')
    console.log(`%c⚪Total Imgs: ${reportImgs.totalImg}`, 'color: white; font-size: 0.8rem');
    console.log(`%c🟣Total Cargadas: ${reportImgs.imgLoaded}`, 'color: hotpink; font-size: 0.8rem');
    console.log('----------------------------------------')
}

const allElementsDeleted = () => {
    console.log(`⚠ Todas las imagenes fueron eliminadas`);
}

const createImageNode = () => {
    const container = document.createElement('div');
    container.className = 'flex flex-col items-center p-4 mx-auto';

    const img = document.createElement('img');
    img.className = 'mx-auto rounded bg-gray-300';
    img.width = "320";
    img.style.minHeight = '300'
    img.dataset.src = `${URL}/${random()}.jpg`; // TODO

    img.onload = stopContentLoader; //onload llama una funcion

    container.appendChild(img);

    return container;
};

const nuevaImagen = createImageNode();

const addImage = () => {
    const newImage = createImageNode();
    mountNode.append(newImage);
    registerImage(newImage);
    
    reportImgs.totalImg++;
    showReportImg();
}

const removeAllImg = () =>{
    mountNode.innerHTML = "";
    reportImgs.imgLoaded = 0;
    reportImgs.totalImg = 0;
    allElementsDeleted()
}


//captura la etiqueta img del html
const mountNode = document.getElementById('images')

//captura el button del html
const addButton = document.querySelector('#addButton');
addButton.className = 'text-white px-3 py-2 rounded-lg bg-indigo-600 focus:outline-none';

const removeButton = document.querySelector('#removeButton')
removeButton.className ='rounded-lg mt-5 px-3 py-2 text-indigo-600 border border-indigo-600 focus:outline-none';

addButton.addEventListener('click', addImage);
removeButton.addEventListener('click', removeAllImg);

lazy.js

const isIntersecting = (entry) => entry.isIntersecting; //true (dentro de la pantalla)

const loadImage = (entry) => {
    const container = entry.target; //regresa un container (DIV)
    const imagen = container.firstChild;
    const url = imagen.dataset.src
    //cargar la imagen.
    imagen.src=url

    // console.log(entry);

    //desregistrar el evento
    observer.unobserve(container);
};

const observer = new IntersectionObserver((entries)=>{
    entries.filter(isIntersecting).forEach(loadImage);
});

export const registerImage = (imagen) => {
    //intersectationObservador -> observer(imagen)
    observer.observe(imagen)
}

Joaquin Ariel Tejerina

Hace 5 años

Esta muy, buena tu solución para mostrar las imagenes totales y las imagenes cargadas,yo copie la parte del index.js, le agregue al de lazy.js Gracias por la solución, yo no sabia muy biien como manejarlo, sos un grande!!

lazy.js

import { reportImgs, showReportImg } from'./index'
const isIntersecting = (entry) => {
	// console.log("entry de isIntersecting: ",entry)
	// console.log("entry.target.isConnected de isIntersecting: ",entry.target.isConnected);
	// SI esta a 200px de la pantalla hacer x o y cosa 
	return entry.isIntersecting  // true ( dentro de la pantalla)
}
const loadImage = (entry) => {
	
	const container = entry.target; // div que tiene adentro a la imagen
	
	const imagen = container.firstChild;
	const url = imagen.dataset.src;
	
	//load image
	imagen.src = url;
	
	// unobserve
	observer.unobserve(container)
	reportImgs.imgLoaded++;
	showReportImg();
}

const observer = new IntersectionObserver((entries) => {
	// console.log("entries de: IntersectionObserver: ",entries);
	entries.filter(isIntersecting).forEach(loadImage)
}) 


export const registerImage = (imanen) => {
	// IntersectionObserver => observer(imagen)
	observer.observe(imanen)
};

Comparte el resultado

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones