Flickering when new items are added

naver / egjs-infinitegrid

A module used to arrange card elements including content infinitely on a grid layout.

https://naver.github.io/egjs-infinitegrid/

MIT License

2.23k stars 95 forks source link

Flickering when new items are added #478

Open H4xX0r1337 opened 2 years ago

H4xX0r1337 commented 2 years ago

It seems to be the case that everytime you add a new item (containing images in my case), it gets visible at the top left for a frame or so. I tried it both with recycling on and off.

H4xX0r1337 commented 2 years ago

Currently I'm using this hotfix: <div class="item" style="z-index: {item.groupKey};">

daybrush commented 2 years ago

@H4xX0r1337

all i can guess

Have you set the key to the item?
Sorry if the framework is svelte or angular. Because the rendering process is asynchronous, flickering may occur. In that case, setting the initial css is fine.
```
.item {
position: absolute;
left: -9999px;
top: -9999px;
}
```

H4xX0r1337 commented 2 years ago

@daybrush Sorry for responding so late. The flickerign is gone using the css you posted, but now some images "pop in" between others, moving the others around. It seems to only add the images when they are fully loaded, however i know the width and height beforehand, so it would be cool if i was able to put a placeholder there. I did not find a way to use the built in placeholder feature in svelte and i also was not able to use css for that (it wont show up until the actual image has loaded)