supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1925 from thelounge/xpaw/img-preview-preload

Browse Source 
Preload preview images before appending them to DOM
This commit is contained in:
Pavel Djundik 2018-01-31 10:07:20 +02:00 committed by GitHub
commit ffa9685b41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/js/renderPreview.js
View File

@ -15,6 +15,19 @@ function renderPreview(preview, msg) {
return;
}
const template = $(templates.msg_preview({preview: preview}));
const image = template.find("img:first");
if (image.length === 0) {
return appendPreview(preview, msg, template);
}
// If there is an image in preview, wait for it to load before appending it to DOM
// This is done to prevent problems keeping scroll to the bottom while images load
image.on("load", () => appendPreview(preview, msg, template));
}
function appendPreview(preview, msg, template) {
const escapedLink = preview.link.replace(/["\\]/g, "\\$&");
const previewContainer = msg.find(`.preview[data-url="${escapedLink}"]`);
@ -33,23 +46,13 @@ function renderPreview(preview, msg) {
const channelId = container.closest(".chan").data("id") || -1;
const activeChannelId = chat.find(".chan.active").data("id") || -2;
let bottom = false;
if (activeChannelId === channelId) {
bottom = container.isScrollBottom();
}
msg.find(`.text a[href="${escapedLink}"]`)
.first()
.after(templates.msg_preview_toggle({preview: preview}).trim());
previewContainer
.append(templates.msg_preview({preview: preview}));
previewContainer.append(template);
if (activeChannelId === channelId) {
if (preview.shown && bottom) {
handleImageInPreview(msg.find(".toggle-content"), container);
}
container.trigger("keepToBottom");
}
}
@ -61,10 +64,6 @@ $("#chat").on("click", ".text .toggle-button", function() {
.find(`.preview[data-url="${self.data("url")}"] .toggle-content`);
const bottom = container.isScrollBottom();
if (bottom && !content.hasClass("show")) {
handleImageInPreview(content, container);
}
self.toggleClass("opened");
content.toggleClass("show");
@ -84,17 +83,6 @@ $("#chat").on("click", ".text .toggle-button", function() {
}
});
function handleImageInPreview(content, container) {
const img = content.find("img");
// Trigger scroll logic after the image loads
if (img.length && !img.width()) {
img.on("load", function() {
container.trigger("keepToBottom");
});
}
}
/* Image viewer */
const imageViewer = $("#image-viewer");