Most programmatic images are lazy.

This commit is contained in:
Ben Dailey 2022-02-15 13:00:26 -05:00
parent 4f8aba0801
commit ce267c7e3c
7 changed files with 8 additions and 7 deletions

View File

@ -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'), '&'); 'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&');
// Modify the row data as needed // 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['Name'] = validHtmlStr($row['Name']);
$row['Archived'] = $row['Archived'] ? translate('Yes') : translate('No'); $row['Archived'] = $row['Archived'] ? translate('Yes') : translate('No');
$row['Emailed'] = $row['Emailed'] ? translate('Yes') : translate('No'); $row['Emailed'] = $row['Emailed'] ? translate('Yes') : translate('No');

View File

@ -200,7 +200,7 @@ function queryRequest($search, $advsearch, $sort, $offset, $order, $limit) {
$scale = intval(5*100*ZM_WEB_LIST_THUMB_WIDTH / $event->Width()); $scale = intval(5*100*ZM_WEB_LIST_THUMB_WIDTH / $event->Width());
$imgSrc = $event->getThumbnailSrc(array(), '&amp;'); $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['Name'] = validHtmlStr($row['Name']);
$row['Description'] = validHtmlStr($row['Description']); $row['Description'] = validHtmlStr($row['Description']);

View File

@ -62,7 +62,7 @@ foreach ( $rows as $row ) {
'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&amp;'); 'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&amp;');
// Modify the row data as needed // 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['Name'] = validHtmlStr($row['Name']);
$row['StartDateTime'] = strftime(STRF_FMT_DATETIME_SHORTER, strtotime($row['StartDateTime'])); $row['StartDateTime'] = strftime(STRF_FMT_DATETIME_SHORTER, strtotime($row['StartDateTime']));
$row['Length'] = gmdate('H:i:s', $row['Length'] ); $row['Length'] = gmdate('H:i:s', $row['Length'] );

View File

@ -264,7 +264,7 @@ function getImageStreamHTML( $id, $src, $width, $height, $title='' ) {
if ( canStreamIframe() ) { if ( canStreamIframe() ) {
return '<iframe id="'.$id.'" src="'.$src.'" alt="'. validHtmlStr($title) .'" '.($width? ' width="'. validInt($width).'"' : '').($height?' height="'.validInt($height).'"' : '' ).'/>'; return '<iframe id="'.$id.'" src="'.$src.'" alt="'. validHtmlStr($title) .'" '.($width? ' width="'. validInt($width).'"' : '').($height?' height="'.validInt($height).'"' : '' ).'/>';
} else { } 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='') { function getImageStill($id, $src, $width, $height, $title='') {
return '<img id="'.$id.'" src="'.$src.'" alt="'.$title.'"'. return '<img id="'.$id.'" src="'.$src.'" alt="'.$title.'"'.
(validInt($width)?' width="'.$width.'"':''). (validInt($width)?' width="'.$width.'"':'').
(validInt($height)?' height="'.$height.'"':'').'/>'; (validInt($height)?' height="'.$height.'"':'').' loading="lazy" />';
} }
function getWebSiteUrl($id, $src, $width, $height, $title='') { function getWebSiteUrl($id, $src, $width, $height, $title='') {

View File

@ -319,7 +319,7 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
.$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'. .$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'.
($options['width'] ? ' width="'.$options['width'].'"' : '' ). ($options['width'] ? ' width="'.$options['width'].'"' : '' ).
($options['height'] ? ' height="'.$options['height'].'"' : '' ). ($options['height'] ? ' height="'.$options['height'].'"' : '' ).
'/></a></div>'; ' loading="lazy" /></a></div>';
} }
?> ?>
<td class="colName"> <td class="colName">

View File

@ -129,6 +129,7 @@ if ($imageData['hasAnalImage']) {
height="<?php echo reScale($Event->Height(), $Monitor->DefaultScale(), $scale) ?>" height="<?php echo reScale($Event->Height(), $Monitor->DefaultScale(), $scale) ?>"
alt="<?php echo $Frame->EventId().'-'.$Frame->FrameId() ?>" alt="<?php echo $Frame->EventId().'-'.$Frame->FrameId() ?>"
class="<?php echo $imageData['imageClass'] ?>" class="<?php echo $imageData['imageClass'] ?>"
loading="lazy"
/> />
<?php <?php
if ($imageData['hasAnalImage']) { ?></a><?php } ?> if ($imageData['hasAnalImage']) { ?></a><?php } ?>

View File

@ -695,7 +695,7 @@ foreach ( $monitors as $monitor ) {
<div class="monitorPanel" style="width:<?php echo 100/count($monitors); ?>%; float:left;"> <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="imagePanel"<?php echo count($monitors)==1?' style="width: 50%; float: left;"' :''?>>
<div class="imageHeight image"> <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> </div>
<div id="dataPanel<?php echo $monitor->Id() ?>" class="dataPanel"<?php echo count($monitors)==1?' style="width: 50%; float: left;"' :''?>> <div id="dataPanel<?php echo $monitor->Id() ?>" class="dataPanel"<?php echo count($monitors)==1?' style="width: 50%; float: left;"' :''?>>