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.
Hay dos partes en esto:
{#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