Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

lightbox: Set payload.source on srcset. 

This eliminates a flash of the smaller/blurrier preview image when
navigating to images that have already been loaded in full.
This commit is contained in:
Karl Stolley 2024-07-24 09:53:26 -05:00 committed by Tim Abbott
parent d448a0b271
commit 829212a76a
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lightbox.ts
View File

@ -268,11 +268,15 @@ function display_image(payload: Payload): void {
$img.attr("src", payload.preview);
$img.attr("width", payload.original_width_px);
$img.attr("height", payload.original_height_px);
$img.one("load", () => {
$img.attr("src", payload.source);
});
// srcset contains the reference to the original image,
// and will be preferred over the src image when available
$img.attr("srcset", `${payload.source} ${payload.original_width_px}w`);
$img.attr("sizes", "100vw");
} else {
$img.attr("src", payload.source);
// this could be just assigned to src, but srcset is used here
// for consistency
$img.attr("srcset", `${payload.source} ${payload.original_width_px}w`);
$img.attr("sizes", "100vw");
}
$img_container.empty();
$img_container.append($img).show();