forked from nostr/nostrweb
noxy: add lazy load attribute to noxy images
Only for browsers that support loading=lazy attribute, but this should reduce the load on noxy and only fetch images that are relevant (in the viewport of close to it).
parent
9250ccf287
commit
a580bc67b2
|
@ -171,7 +171,7 @@ const getNoxyUrl = (type, url, id, relay) => {
|
|||
function linkPreview(href, id, relay) {
|
||||
if ((/\.(gif|jpe?g|png)$/i).test(href)) {
|
||||
return elem('div', {},
|
||||
[elem('img', {className: 'preview-image-only', src: getNoxyUrl('data', href, id, relay).href})]
|
||||
[elem('img', {className: 'preview-image-only', loading: 'lazy', src: getNoxyUrl('data', href, id, relay).href})]
|
||||
);
|
||||
}
|
||||
const noxy = getNoxyUrl('meta', href, id, relay);
|
||||
|
@ -182,7 +182,7 @@ function linkPreview(href, id, relay) {
|
|||
const container = document.getElementById(previewId);
|
||||
container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, [
|
||||
meta.images[0] && (
|
||||
elem('img', {className: 'preview-image', src: getNoxyUrl('data', meta.images[0], id, relay).href})
|
||||
elem('img', {className: 'preview-image', loading: 'lazy', src: getNoxyUrl('data', meta.images[0], id, relay).href})
|
||||
),
|
||||
elem('h2', {className: 'preview-title'}, meta.title),
|
||||
elem('p', {className: 'preview-descr'}, meta.descr),
|
||||
|
@ -435,8 +435,9 @@ function getMetadata(evt, relay) {
|
|||
const userName = name || evt.pubkey.slice(0, 8);
|
||||
const userAbout = user?.metadata[relay]?.about || '';
|
||||
const img = userImg ? elem('img', {
|
||||
src: userImg,
|
||||
alt: `${userName} ${host}`,
|
||||
loading: 'lazy',
|
||||
src: userImg,
|
||||
title: `${userName} on ${host} ${userAbout}`,
|
||||
}) : elemCanvas(evt.pubkey);
|
||||
const isReply = evt.tags.some(hasEventTag);
|
||||
|
|
Loading…
Reference in New Issue