Comments (5)
Since the key is an index, it is difficult to detect size changes if the item has the same key.
Try using the renderItems method every time you search it.
grid.renderItems({ useOrgResize: true });
from egjs-grid.
Changing key to image url worked, it now resizes automatically.
There's another problem - before loading all images, it quickly flashes them in their real size before actually fitting into the grid. You can see it happening in the first 3 seconds of the video on the first search.
Is that solvable? I tried with other libraries but don't see the same issue.
from egjs-grid.
It can't be helped because there is time for the image to load.
-
In the first render, You can hide it by setting position: absolute; left: -9999px; top: -9999px;
-
If the width x height size can be known in advance, it can be solved.
<img data-grid-width="100" data-grid-height="100" />
from egjs-grid.
@daybrush so how do other packages do it? obviously must be something the way you implemented the grid. Thanks anyways!
from egjs-grid.
MasonryGrid, JustifiedGrid FrameGrid, ... works the same in all Grids.
from egjs-grid.
Related Issues (20)
- How to update grid after hiding some divs? HOT 3
- Function aligned to top
- I want to set the column according to the size while using stretch.
- If you scroll fast, the mounted value is incorrect.
- build failed with SvelteKit latest version HOT 3
- ResizeObserver related bug in safari 15.3
- Using align stretch makes the vertical spacing between items appear empty.
- Vanilla Svelte renders images as list instead of a grid HOT 2
- TypeError TS2322: is missing the following properties from type - Vue 3 - TypeScript HOT 1
- svelte package does not work HOT 2
- A phenomenon in which the size of the resize observer is not updated in iOS
- FrameGrid: relationship of frame property to resulting layout is not obvious HOT 1
- Can isEqualSize be used when there are two or more size groups?
- bug: the gap not work HOT 13
- Can I change the container of MasonryGrid? HOT 2
- `0` size group should be recognized.
- how to get current column count HOT 2
- Angular 16 compatibility HOT 7
- A problem that does not work when data-grid-column is set to 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from egjs-grid.