Page MenuHomePhabricator

Imagegrid should lazy load
Closed, ResolvedPublic

Description

We would like to lazy load images on scroll in imagegrid, so it can cope with large results and also is initially faster in showing the first batch of images.

Demo:
http://tinyurl.com/zbmauyv

Acceptance criteria:

  • The browser should only load images in the viewport.
  • When scrolling new images should be loaded.
  • Some images should be preloaded so when I scroll I always see loaded images.
  • The page should never jump or rearrange elements.
  • Page size and column count should be responsive.

This library could be used:
https://masonry.desandro.com/

Event Timeline

Restricted Application added projects: Wikidata, Discovery. · View Herald TranscriptMay 24 2017, 9:43 AM
Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald Transcript
Lydia_Pintscher triaged this task as Low priority.Jun 11 2017, 5:11 PM
Lydia_Pintscher moved this task from incoming to ready to go on the Wikidata board.
Restricted Application added a subscriber: PokestarFan. · View Herald TranscriptJul 22 2017, 8:45 AM
rosalieper removed rosalieper as the assignee of this task.Aug 21 2017, 5:04 AM
rosalieper added a subscriber: rosalieper.
Florian moved this task from Proposed tasks to Imported in GCI Site on the Google-Code-in-2017 board.
Florian added a subscriber: Florian.

For GCI students: What is the acceptance criteria, when does a student now, when the task is finished? :) Is there any material which could help them to solve this task?

Jonas updated the task description. (Show Details)Nov 19 2017, 2:08 PM
  • The browser should only load images in the viewport.
  • When scrolling new images should be loaded.

👎 for these two from me. Why should we wait to load the images (which will still take some time) until the user scrolls to them? That just means we’re making them wait unnecessarily IMHO.

Jonas updated the task description. (Show Details)Nov 19 2017, 6:53 PM

Now better?

Yeah :)

One possibility to fix the “jumping around” issue would be to get the image sizes from the Commons API (action=query, prop=imageinfo, iiprop=size, titles=…) and to set fixed sizes on the tiles using that, before we start loading the images. However, since the titles parameter is limited to 50 titles per request, that still means several API requests for large result sets… I’m not sure if we can fix the problem completely without reordering the grid in horizontal instead of vertical lines.

Restricted Application added a project: Design. · View Herald TranscriptNov 20 2017, 3:28 PM

We are currently working to capacity, so feedback will be brief, for now.

  • What about paging?: *1234 items found: 1 | 2 | 3 | … like google pages.
  • If I am not mistaken, the implementation at tumblr (only autoloading page that came to my mind) is that you scroll a bit below the fold, then a spinner/waiting icon appears until images are loaded.

Does this help?

Jonas updated the task description. (Show Details)Dec 3 2017, 2:01 PM

Change 399808 had a related patch set uploaded (by StudentSydney; owner: StudentSydney):
[wikidata/query/gui@master] Implement masonry and lazy loading on image results

https://gerrit.wikimedia.org/r/399808

I'm new at this so forgive me if I say anything dumb.
@Lucas_Werkmeister_WMDE made some good points. Are rows of uniform height acceptable, or is there some reason to use columns instead? Columns will always be awkwardly staggard at the bottom if the images above haven't loaded yet unless you get their dimensions first. Besides, if the order of results matters, it's much more natural to see the order if the rows are all aligned. Masonry approximates the proper order but it's still rather ambiguous.

Change 400407 had a related patch set uploaded (by StudentSydney; owner: StudentSydney):
[wikidata/query/gui@master] Implement infinite-scroll style lazy loading

https://gerrit.wikimedia.org/r/400407

Change 401897 had a related patch set uploaded (by StudentSydney; owner: StudentSydney):
[wikidata/query/gui@master] Add lazy loading of images in query results and display in rows

https://gerrit.wikimedia.org/r/401897

Change 402626 had a related patch set uploaded (by StudentSydney; owner: StudentSydney):
[wikidata/query/gui@master] Add lazy image loading and display images in rows

https://gerrit.wikimedia.org/r/402626

Change 402760 had a related patch set uploaded (by StudentSydney; owner: StudentSydney):
[wikidata/query/gui@master] Add lazy loading images and grid layout in rows to images

https://gerrit.wikimedia.org/r/402760

Jan_Dittrich moved this task from Incoming to Incoming WD on the WMDE-Design board.Jan 8 2018, 3:55 PM

Change 403192 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: StudentSydney):
[wikidata/query/gui@master] Add lazy loading images and grid layout in rows to images

https://gerrit.wikimedia.org/r/403192

Change 402760 abandoned by Jonas Kress (WMDE):
Add lazy loading images and grid layout in rows to images

Reason:
Please work on:
https://gerrit.wikimedia.org/r/#/c/403192/

https://gerrit.wikimedia.org/r/402760

Change 402626 abandoned by Jonas Kress (WMDE):
Add lazy image loading and display images in rows

Reason:
https://gerrit.wikimedia.org/r/#/c/403192/

https://gerrit.wikimedia.org/r/402626

Change 401897 abandoned by Jonas Kress (WMDE):
Add lazy loading of images in query results and display in rows

Reason:
https://gerrit.wikimedia.org/r/#/c/403192/

https://gerrit.wikimedia.org/r/401897

Change 400407 abandoned by Jonas Kress (WMDE):
Implement infinite-scroll style lazy loading

Reason:
https://gerrit.wikimedia.org/r/#/c/403192/

https://gerrit.wikimedia.org/r/400407

Change 399808 abandoned by Jonas Kress (WMDE):
Implement masonry and lazy loading on image results

Reason:
https://gerrit.wikimedia.org/r/#/c/403192/

https://gerrit.wikimedia.org/r/399808

Change 404402 had a related patch set uploaded (by StudentSydney; owner: StudentSydney):
[wikidata/query/gui@master] Add lazy loading and image rows

https://gerrit.wikimedia.org/r/404402

Jonas raised the priority of this task from Low to Needs Triage.Jan 16 2018, 7:56 PM
Jonas edited projects, added Wikidata Query UI; removed Wikidata-Query-Service.
Jonas moved this task from Backlog to Doing on the Wikidata Query UI board.

Change 404402 merged by jenkins-bot:
[wikidata/query/gui@master] Add lazy loading and image rows

https://gerrit.wikimedia.org/r/404402

Jonas moved this task from Doing to Done on the Wikidata Query UI board.Jan 17 2018, 4:13 PM
Florian removed a subscriber: Florian.Jan 18 2018, 5:37 PM

Change 403192 abandoned by Lucas Werkmeister (WMDE):
Add lazy loading images and grid layout in rows to images

https://gerrit.wikimedia.org/r/403192

Lydia_Pintscher closed this task as Resolved.Feb 26 2018, 1:33 PM
Lydia_Pintscher claimed this task.