Page MenuHomePhabricator
Create Task
Maniphest T166216

Imagegrid should lazy load
Closed, ResolvedPublic
Actions

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/

Details

SubjectRepoBranchLines +/-
Add lazy loading images and grid layout in rows to imageswikidata/query/guimaster+331 -67
Add lazy loading and image rowswikidata/query/guimaster+339 -68
Implement masonry and lazy loading on image resultswikidata/query/guimaster+35 -27
Implement infinite-scroll style lazy loadingwikidata/query/guimaster+88 -36
Add lazy loading of images in query results and display in rowswikidata/query/guimaster+283 -129
Add lazy image loading and display images in rowswikidata/query/guimaster+122 -67
Add lazy loading images and grid layout in rows to imageswikidata/query/guimaster+3 -0
Customize query in gerrit

Related Objects

Event Timeline

• Jonas created this task.May 24 2017, 9:43 AM
Restricted Application added projects: Wikidata, Discovery-ARCHIVED. · View Herald TranscriptMay 24 2017, 9:43 AM
Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald Transcript
• Jonas moved this task from Incoming to GUI on the Wikidata-Query-Service board.May 24 2017, 9:43 AM
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.
rosalieper claimed this task.Jul 1 2017, 5:14 PM
xSavitar added a project: Africa-Wikimedia-Developers.Jul 2 2017, 2:25 PM
xSavitar moved this task from Backlog to New Contributor's Tasks (Incoming) on the Africa-Wikimedia-Developers board.
xSavitar moved this task from New Contributor's Tasks (Incoming) to Tasks in progress (Doing) on the Africa-Wikimedia-Developers board.Jul 18 2017, 1:46 AM
xSavitar moved this task from Tasks in progress (Doing) to New Contributor's Tasks (Incoming) on the Africa-Wikimedia-Developers board.Jul 22 2017, 8:45 AM
Restricted Application added a subscriber: PokestarFan. · View Herald TranscriptJul 22 2017, 8:45 AM
xSavitar moved this task from New Contributor's Tasks (Incoming) to Tasks in progress (Doing) on the Africa-Wikimedia-Developers board.Aug 18 2017, 2:29 PM
rosalieper removed rosalieper as the assignee of this task.Aug 21 2017, 5:04 AM
rosalieper subscribed.
rosalieper moved this task from Tasks in progress (Doing) to New Contributor's Tasks (Incoming) on the Africa-Wikimedia-Developers board.Aug 21 2017, 5:27 AM
Florian added a project: Google-Code-in-2017.Nov 18 2017, 12:17 PM
Florian moved this task from Proposed tasks to Imported in GCI Site on the Google-Code-in-2017 board.
Florian subscribed.

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
Lucas_Werkmeister_WMDE subscribed.Nov 19 2017, 3:34 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?

Lucas_Werkmeister_WMDE added a comment.Nov 20 2017, 1:51 PM

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.

Lydia_Pintscher added a project: WMDE-Design.Nov 20 2017, 3:28 PM
Lydia_Pintscher subscribed.

UX input please.

Restricted Application added a project: Design. · View Herald TranscriptNov 20 2017, 3:28 PM
• Jan_Dittrich subscribed.Nov 27 2017, 3:37 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
xSavitar removed a project: Africa-Wikimedia-Developers.Dec 9 2017, 1:38 PM
xSavitar subscribed.

Removing Africa-Wikimedia-Developers tag as task is put up for Google-Code-in-2017.

StudentSydney subscribed.Dec 20 2017, 10:16 AM
gerritbot subscribed.Dec 22 2017, 1:36 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

gerritbot added a project: Patch-For-Review.Dec 22 2017, 1:36 PM
StudentSydney mentioned this in rWDQG68ebe373ca45: Implement masonry and lazy loading on image results.Dec 22 2017, 1:38 PM
StudentSydney added a comment.Dec 23 2017, 9:12 AM

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.

gerritbot added a comment.Dec 27 2017, 2:44 PM

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

StudentSydney mentioned this in rWDQG814b9168c02f: Implement infinite-scroll style lazy loading.Dec 27 2017, 2:50 PM
StudentSydney mentioned this in rWDQGbfd6a44487a0: Implement infinite-scroll style lazy loading.Dec 27 2017, 8:36 PM
StudentSydney mentioned this in rWDQG3e72b97e27c9: Implement infinite-scroll style lazy loading.Dec 27 2017, 9:08 PM
StudentSydney mentioned this in rWDQG8bf03a5bacb7: Implement infinite-scroll style lazy loading.
gerritbot added a comment.Jan 4 2018, 6:19 AM

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

StudentSydney mentioned this in rWDQG0c457ae4f1ed: Implement masonry and lazy loading on image results.Jan 4 2018, 6:22 AM
StudentSydney mentioned this in rWDQG41cae7a98f29: Implement infinite-scroll style lazy loading.
StudentSydney mentioned this in rWDQG9f687de7fdbb: Add lazy loading of images in query results and display in rows.
gerritbot added a comment.Jan 7 2018, 5:48 AM

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

StudentSydney mentioned this in rWDQG5a76063f11b8: Implement masonry and lazy loading on image results.Jan 7 2018, 5:49 AM
StudentSydney mentioned this in rWDQG46343463ad9d: Implement infinite-scroll style lazy loading.
StudentSydney mentioned this in rWDQGfdf5e8f3b127: Add lazy loading of images in query results and display in rows.
StudentSydney mentioned this in rWDQG019e44c7bb19: Add lazy image loading and display images in rows.
gerritbot added a comment.Jan 8 2018, 2:56 AM

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

StudentSydney mentioned this in rWDQG63314919b53c: Add lazy loading images and grid layout in rows to images.Jan 8 2018, 2:58 AM
• Jan_Dittrich moved this task from Incoming to Incoming WD on the WMDE-Design board.Jan 8 2018, 3:55 PM
gerritbot added a comment.Jan 9 2018, 4:28 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

Lucas_Werkmeister_WMDE mentioned this in rWDQG26a7e22e864b: Add lazy loading images and grid layout in rows to images.Jan 9 2018, 4:28 PM
gerritbot added a comment.Jan 10 2018, 10:05 AM

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

gerritbot added a comment.Jan 10 2018, 10:05 AM

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

gerritbot added a comment.Jan 10 2018, 10:05 AM

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

gerritbot added a comment.Jan 10 2018, 10:05 AM

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

gerritbot added a comment.Jan 10 2018, 10:05 AM

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

gerritbot added a comment.Jan 16 2018, 4:36 AM

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

StudentSydney mentioned this in rWDQGe6623d79d3b0: Add lazy loading and image rows.Jan 16 2018, 4:38 AM
Lucas_Werkmeister_WMDE mentioned this in rWDQG9f662f0fb170: Add lazy loading and image rows.Jan 16 2018, 5:44 PM
• 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.
gerritbot added a comment.Jan 17 2018, 8:38 AM

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 unsubscribed.Jan 18 2018, 5:37 PM
gerritbot added a comment.Jan 31 2018, 11:11 AM

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.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits