Right now, it can take several seconds to display images in the Media Viewer, because we're asking the server to resize the image at a custom size.

To speed up this image display, we will try to fetch the thumbnail size that is closest to 100% of the screen width but no more than 90% of the screen height (instead of asking the server to pre-render custom sizes, which is too time-consuming).

We would also start displaying the image as soon as it is available, without waiting for the meta-data to be loaded.

One could maybe preload the small image (scaled large by the browser) to give
something for the user to look at well the big image is loaded.

That's actually not a horrible idea. It would be a little like the olden days of progressive jpeg images. You could take the thumb that is already inline in the page and stretch it out to the new size as a placeholder while the larger image is fetched.

(In reply to comment #1)
> One could maybe preload the small image (scaled large by the browser) to give
> something for the user to look at well the big image is loaded.

That's actually not a horrible idea. It would be a little like the olden days
of progressive jpeg images. You could take the thumb that is already inline
in
the page and stretch it out to the new size as a placeholder while the larger
image is fetched.

+1 I endorse this approach. Same technique can be used when resizing the window (or switching orientation on a tablet or mobile showing the desktop-mode site), if you find it's best to fetch a new full-size image for the new window size.

It should be fairly straightforward to nab the src property from the thumbnail, and since the resource is cached it'll display immediately... Then use an offscreen image element (you can just create it in JS, no need to add to the document) and wait for its onload (or onerror!) to fire before updating the visible image with the full-size src.

Add Comment

Text is available under the Creative Commons Attribution-ShareAlike 3.0 License; code is available under the GNU General Public License or other appropriate open source licenses. By using this site, you agree to the Terms of Use and Privacy Policy. · Wikimedia Foundation · Privacy Policy · Terms of Use · Disclaimer

Column Prototype

This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.