Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

90
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!