add 'lazy: false' in listing items to control lazy loading of images.…

… true by default

src/project/types/website/listing/website-listing-shared.ts

@@ -73,6 +73,9 @@ export const kImageAlign = "image-align";
 // Alt text for the item's image
 export const kImageAlt = "image-alt";
 
+// Lazy loading for the item's image. If unset, the default is true.
+export const kImageLazyLoading = "image-lazy-loading";
+
 // The placeholder image for the item
 export const kImagePlaceholder = "image-placeholder";
 
@@ -211,6 +214,7 @@ export interface ListingItem extends Record<string, unknown> {
   date?: Date;
   image?: string;
   [kImageAlt]?: string;
+  [kImageLazyLoading]?: boolean;
   path?: string;
   filename?: string;
   [kFieldFileModified]?: Date;

src/project/types/website/listing/website-listing-template.ts

@@ -95,7 +95,7 @@ export function templateMarkdownHandler(
             // For file modified specifically, include the time portion
             const includeTime = field === kFieldFileModified;
 
-            const date = typeof (dateRaw) === "string"
+            const date = typeof dateRaw === "string"
               ? parsePandocDate(dateRaw as string)
               : dateRaw as Date;
             if (date) {
@@ -422,6 +422,7 @@ export function reshapeListing(
     src: string,
     classes: string,
     alt?: string,
+    lazy?: boolean,
   ) => {
     const pageSize = listing[kPageSize];
     const classAttr = classes ? `class="${classes}"` : "";
@@ -430,8 +431,8 @@ export function reshapeListing(
       : "";
     const altAttr = alt ? `alt="${encodeAttributeValue(alt)}"` : "";
     const srcAttr = itemNumber > pageSize ? "data-src" : "src";
-
-    return `<img ${srcAttr}="${src}" ${classAttr} ${styleAttr} ${altAttr}>`;
+    const lazyAttr = lazy === false ? "" : "loading='lazy' ";
+    return `<img ${lazyAttr}${srcAttr}="${src}" ${classAttr} ${styleAttr} ${altAttr}>`;
   };
   utilities.imgPlaceholder = (
     itemNumber: number,