Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PERF: Improve lazy-load performance in Safari 

Safari starts loading images as soon as attributes are modified. Modern browsers all prefer the srcset attribute over src, so we should remove srcset last, and add it first.
This commit is contained in:
David Taylor 2020-04-21 17:52:19 +01:00
parent 036236d6d6
commit f51b48b421
No known key found for this signature in database
GPG Key ID: 46904C18B1D3F434
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,9 +22,10 @@ function hide(image) {
height: image.height,
className: image.className
});
image.removeAttribute("srcset");
image.src = image.dataset.smallUpload || LOADING_DATA;
image.removeAttribute("srcset");
image.removeAttribute("data-small-upload");
}
@ -35,10 +36,10 @@ function show(image) {
if (imageData) {
const copyImg = new Image();
copyImg.onload = () => {
image.src = copyImg.src;
if (copyImg.srcset) {
image.srcset = copyImg.srcset;
}
image.src = copyImg.src;
image.classList.remove("d-lazyload-hidden");
if (image.onload) {
@ -55,12 +56,12 @@ function show(image) {
copyImg.onload = null;
};
copyImg.src = imageData.src;
if (imageData.srcset) {
copyImg.srcset = imageData.srcset;
}
copyImg.src = imageData.src;
// width of image may not match, use computed style which
// is the actual size of the image
const computedStyle = window.getComputedStyle(image);