Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

83
Vistas
Svelte volver a renderizar una lista virtual de imágenes hace que las imágenes parpadeen

No estoy seguro de si debería publicar esto aquí o agregarlo a Svelte Creators github, pero tengo un problema aquí que puede necesitar una solución para ser aplicado en el lado esbelto.

Estoy tratando de representar una lista virtual de imágenes, teniendo solo las imágenes que se muestran en la ventana gráfica, en el DOM.

Aquí hay un REPL básico que reproduce el problema: https://svelte.dev/repl/d6c4617ada3b47d8b197b0e67820eba7?version=3.42.4

En mi computadora solo lo veo muy claramente si uso Chrome y abro las herramientas de desarrollo por alguna razón. A medida que me desplazo por la cuadrícula y la lista de imágenes agregadas al DOM cambia, las imágenes parpadean.

Es como si las manipulaciones DOM que hace Svelte estuvieran causando esto.

Parece que, a medida que desplazamos los siguientes elementos en la vista y ocultamos los elementos anteriores, el algoritmo de manipulación Svelte Dom cambia las posiciones y fuentes de TODAS las imágenes presentes en la cuadrícula virtual, para mostrar las apropiadas en la ventana gráfica.

Si, en cambio, pudiera reconciliar los elementos en la lista y mantener los que permanecen en la ventana gráfica en el desplazamiento sin cambiar y, por lo tanto, sin parpadear (y creo que también enviando una solicitud de red), sería genial.

No estoy seguro de si es posible lograr esto sin trabajar directamente con un código esbelto.

Tal vez manipular la lista de elementos en varios pasos, pero no estoy seguro de cómo funcionaría.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Hay dos partes en esto:

  1. Esto sucede con las herramientas de desarrollo abierto porque es muy probable que tenga habilitado "deshabilitar caché". Esto significa que todas las imágenes se recargan cada vez que aparecen como parte de un nuevo elemento de imagen. Sin herramientas de desarrollo abiertas o con "deshabilitar caché" deshabilitado, los resultados se almacenan en caché y el parpadeo no aparecerá
  2. Usted reasigna la lista con nuevos elementos cada vez, y Svelte no tiene conocimiento de que podría reutilizar un nodo existente y simplemente reordenarlo. Sin embargo, puede "ayudar" a Svelte aquí y darle una pista para lograrlo: debe especificar una clave que identifique de forma única cada elemento. Esto se llama "cada bloque con clave". Si cambia cada bloque a {#each tiles as tile (tile.im)} , le dice a Svelte que la propiedad im es la que identifica de manera única un elemento, y luego Svelte puede reutilizar los nodos existentes. Documentos: https://svelte.dev/docs#each
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda