From ce267c7e3c4b6f8bc30bf129ddd3182aca540200 Mon Sep 17 00:00:00 2001
From: Ben Dailey <bdailey@hs-c02-bd-ubu.bhmsd.org>
Date: Tue, 15 Feb 2022 13:00:26 -0500
Subject: [PATCH] Most programmatic images are lazy.

---
 web/ajax/events.php                  | 2 +-
 web/ajax/snapshots.php               | 2 +-
 web/ajax/watch.php                   | 2 +-
 web/includes/functions.php           | 4 ++--
 web/skins/classic/views/console.php  | 2 +-
 web/skins/classic/views/frame.php    | 1 +
 web/skins/classic/views/timeline.php | 2 +-
 7 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/ajax/events.php b/web/ajax/events.php
index c95b404c4..28512dfd1 100644
--- a/web/ajax/events.php
+++ b/web/ajax/events.php
@@ -275,7 +275,7 @@ function queryRequest($filter, $search, $advsearch, $sort, $offset, $order, $lim
       'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&amp;');
 
     // Modify the row data as needed
-    $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '"/>';
+    $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '" loading="lazy" />';
     $row['Name'] = validHtmlStr($row['Name']);
     $row['Archived'] = $row['Archived'] ? translate('Yes') : translate('No');
     $row['Emailed'] = $row['Emailed'] ? translate('Yes') : translate('No');
diff --git a/web/ajax/snapshots.php b/web/ajax/snapshots.php
index d122e8a9f..c01e2ddbb 100644
--- a/web/ajax/snapshots.php
+++ b/web/ajax/snapshots.php
@@ -200,7 +200,7 @@ function queryRequest($search, $advsearch, $sort, $offset, $order, $limit) {
       $scale = intval(5*100*ZM_WEB_LIST_THUMB_WIDTH / $event->Width());
       $imgSrc = $event->getThumbnailSrc(array(), '&amp;');
 
-      $row['imgHtml'] .= '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'"/>';
+      $row['imgHtml'] .= '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" loading="lazy" />';
     }
     $row['Name'] = validHtmlStr($row['Name']);
     $row['Description'] = validHtmlStr($row['Description']);
diff --git a/web/ajax/watch.php b/web/ajax/watch.php
index e8c551643..367ab45c3 100644
--- a/web/ajax/watch.php
+++ b/web/ajax/watch.php
@@ -62,7 +62,7 @@ foreach ( $rows as $row ) {
     'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&amp;');
 
   // Modify the row data as needed
-  $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '"/>';
+  $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '" loading="lazy" />';
   $row['Name'] = validHtmlStr($row['Name']);
   $row['StartDateTime'] = strftime(STRF_FMT_DATETIME_SHORTER, strtotime($row['StartDateTime']));
   $row['Length'] = gmdate('H:i:s', $row['Length'] );
diff --git a/web/includes/functions.php b/web/includes/functions.php
index bfa4b9746..9ee3f68be 100644
--- a/web/includes/functions.php
+++ b/web/includes/functions.php
@@ -264,7 +264,7 @@ function getImageStreamHTML( $id, $src, $width, $height, $title='' ) {
   if ( canStreamIframe() ) {
       return '<iframe id="'.$id.'" src="'.$src.'" alt="'. validHtmlStr($title) .'" '.($width? ' width="'. validInt($width).'"' : '').($height?' height="'.validInt($height).'"' : '' ).'/>';
   } else {
-      return '<img id="'.$id.'" src="'.$src.'" alt="'. validHtmlStr($title) .'" style="'.($width? 'width:'.$width.';' : '' ).($height ? ' height:'. $height.';' : '' ).'"/>';
+      return '<img id="'.$id.'" src="'.$src.'" alt="'. validHtmlStr($title) .'" style="'.($width? 'width:'.$width.';' : '' ).($height ? ' height:'. $height.';' : '' ).'" loading="lazy" />';
   }
 }
 
@@ -316,7 +316,7 @@ function outputImageStill($id, $src, $width, $height, $title='') {
 function getImageStill($id, $src, $width, $height, $title='') {
   return '<img id="'.$id.'" src="'.$src.'" alt="'.$title.'"'.
     (validInt($width)?' width="'.$width.'"':'').
-    (validInt($height)?' height="'.$height.'"':'').'/>';
+    (validInt($height)?' height="'.$height.'"':'').' loading="lazy" />';
 }
 
 function getWebSiteUrl($id, $src, $width, $height, $title='') {
diff --git a/web/skins/classic/views/console.php b/web/skins/classic/views/console.php
index e49b2c467..cca0c31a2 100644
--- a/web/skins/classic/views/console.php
+++ b/web/skins/classic/views/console.php
@@ -319,7 +319,7 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
       .$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'.
       ($options['width'] ? ' width="'.$options['width'].'"' : '' ).
       ($options['height'] ? ' height="'.$options['height'].'"' : '' ).
-      '/></a></div>';
+      ' loading="lazy" /></a></div>';
   }
 ?>
             <td class="colName">
diff --git a/web/skins/classic/views/frame.php b/web/skins/classic/views/frame.php
index bf434448a..7446a5f37 100644
--- a/web/skins/classic/views/frame.php
+++ b/web/skins/classic/views/frame.php
@@ -129,6 +129,7 @@ if ($imageData['hasAnalImage']) {
   height="<?php echo reScale($Event->Height(), $Monitor->DefaultScale(), $scale) ?>"
   alt="<?php echo $Frame->EventId().'-'.$Frame->FrameId() ?>"
   class="<?php echo $imageData['imageClass'] ?>"
+  loading="lazy"
 />
 <?php
 if ($imageData['hasAnalImage']) { ?></a><?php } ?>
diff --git a/web/skins/classic/views/timeline.php b/web/skins/classic/views/timeline.php
index c938714a2..4df427107 100644
--- a/web/skins/classic/views/timeline.php
+++ b/web/skins/classic/views/timeline.php
@@ -695,7 +695,7 @@ foreach ( $monitors as $monitor ) {
         <div class="monitorPanel" style="width:<?php echo 100/count($monitors); ?>%; float:left;">
         <div class="imagePanel"<?php echo count($monitors)==1?' style="width: 50%; float: left;"' :''?>>
             <div class="imageHeight image">
-              <img id="imageSrc<?php echo $monitor->Id() ?>" class="imageWidth" src="graphics/transparent.png" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>"/>
+              <img id="imageSrc<?php echo $monitor->Id() ?>" class="imageWidth" src="graphics/transparent.png" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>" loading="lazy" />
             </div>
           </div>
           <div id="dataPanel<?php echo $monitor->Id() ?>" class="dataPanel"<?php echo count($monitors)==1?' style="width: 50%; float: left;"' :''?>>