IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 04:03:57 -06:00
Code Issues 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

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

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