ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3442 from BHMSD-bdailey/lazy-load-images 

Lazy load images
This commit is contained in:
Isaac Connor 2022-02-22 08:57:49 -05:00 committed by GitHub
parent fc21fb643e b2428b5522
commit 372e493b9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ajax/events.php
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');

2
web/ajax/snapshots.php
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']);

2
web/ajax/watch.php
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'] );

4
web/includes/functions.php
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='') {

6
web/skins/classic/includes/export_functions.php
View File

@ -153,7 +153,7 @@ function exportEventFrames($event, $exportDetail, $exportImages) {
<?php <?php
if ( $exportImages ) { if ( $exportImages ) {
?> ?>
<td><a href="<?php echo $imageFile ?>" target="zmExportImage"><img src="<?php echo $imageFile ?>" class="thumb" alt="Frame <?php echo $frame['FrameId'] ?>"/></a></td> <td><a href="<?php echo $imageFile ?>" target="zmExportImage"><img src="<?php echo $imageFile ?>" class="thumb" alt="Frame <?php echo $frame['FrameId'] ?>" loading="lazy" /></a></td>
<?php <?php
} }
?> ?>
@ -576,7 +576,7 @@ function eventlist_html($Event, $exportDetail, $exportFrames, $exportStructure)
$html .= '<a href="#" onclick="switchevent(\''.$Event->Id().'/zmEventImages.html\');return false;"> $html .= '<a href="#" onclick="switchevent(\''.$Event->Id().'/zmEventImages.html\');return false;">
'; ';
if ( ZM_WEB_LIST_THUMBS ) { if ( ZM_WEB_LIST_THUMBS ) {
$html .= '<img width="'.ZM_WEB_LIST_THUMB_WIDTH.'" src="'. $Event->Id().($exportStructure=='flat'?'_':'/').'snapshot.jpg" alt="'.$Event->Id().'"/> $html .= '<img width="'.ZM_WEB_LIST_THUMB_WIDTH.'" src="'. $Event->Id().($exportStructure=='flat'?'_':'/').'snapshot.jpg" alt="'.$Event->Id().'" loading="lazy" />
'; ';
} }
$html .= '</a><br/> $html .= '</a><br/>
@ -584,7 +584,7 @@ function eventlist_html($Event, $exportDetail, $exportFrames, $exportStructure)
} # end if has jpegs } # end if has jpegs
if ($Event->DefaultVideo()) { if ($Event->DefaultVideo()) {
$html .= '<a href="'.$Event->Id().'/'.$Event->DefaultVideo() .'">'; $html .= '<a href="'.$Event->Id().'/'.$Event->DefaultVideo() .'">';
$html .= '<img width="'.ZM_WEB_LIST_THUMB_WIDTH.'" src="'. $Event->Id().($exportStructure=='flat'?'_':'/').'snapshot.jpg" alt="'.$Event->Id().'"/>'; $html .= '<img width="'.ZM_WEB_LIST_THUMB_WIDTH.'" src="'. $Event->Id().($exportStructure=='flat'?'_':'/').'snapshot.jpg" alt="'.$Event->Id().'" loading="lazy" />';
$html .= '</a><br/>'.PHP_EOL; $html .= '</a><br/>'.PHP_EOL;
} }
if ($exportDetail) { if ($exportDetail) {

2
web/skins/classic/views/console.php
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">

1
web/skins/classic/views/frame.php
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 } ?>

2
web/skins/classic/views/timeline.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;"' :''?>>