Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Signup: DSS: Don't show images until they're loaded #1163

Closed
sirbrillig opened this issue Dec 1, 2015 · 1 comment
Closed

Signup: DSS: Don't show images until they're loaded #1163

sirbrillig opened this issue Dec 1, 2015 · 1 comment
Assignees

Comments

@sirbrillig
Copy link
Member

Right now images load slowly. We try to handle this by waiting ~250ms before showing the preview, but depending on the browser and the connection speed, that may not be enough. It would be nice to avoid this guessing game, though.

This is tricky, but it may be possible. My idea is to try loading the image outside of the viewport, tracking its onload event, then updating the images in the previews.

Tracking the onload event of the images in the previews themselves seemed at first like it may make more sense, but there are a few problems:

  1. From what I can tell, the onload event can only be tracked when injecting the image via javascript (doubly tricky in React, see this module). That would be a lot of extra work for each preview.
  2. Some previews use CSS backgrounds instead of img elements, and AFAIK that can't be tracked.

My hope is that if the image is loaded elsewhere on the page, the browser will be intelligent enough to cache it locally and just use the cached copy inside the previews.

@sirbrillig
Copy link
Member Author

With #1195 we have a pretty good start to this. The next step will be to keep the white overlay hiding the preview after searching completes but also until the image is preloaded. We'll do that in a separate PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants