github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-28 13:04:35 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Remove background image after image has loaded (#13642)

Browse Source 
* UX: Remove background image after image has loaded

If an image has a `smallUpload`, that may be set as the `background-image` on the `img` element, and the `img` element set to use `lazy` loading. When the browser decides to load the `src` of the image element, it is rendered on top of the existing background image.

However, if the image proper has a transparent background, the background image may be partially visible through the transparent portions of the image.

This change creates an `onload` event that removes the background image when the image proper has completed loading.
This commit is contained in:
jbrw 2021-07-05 19:15:29 -04:00 committed by GitHub
parent 17497600cd
commit cf63931b9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/lib/lazy-load-images.js
View File

@ -15,8 +15,16 @@ export function nativeLazyLoading(api) {
forEachImage(post, (img) => { forEachImage(post, (img) => {
img.loading = "lazy"; img.loading = "lazy";
if (img.dataset.smallUpload) { if (img.dataset.smallUpload) {
if (!img.complete) {
if (!img.onload) {
img.onload = () => {
img.removeAttribute("style");
};
}
img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`; img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`;
} }
}
}), }),
{ {
onlyStream: true, onlyStream: true,