widget/reply: lazy image loading in html5

Indicate BTF images are optional (assume the first two are visible),
to reduce bandwidth for quick peeks.

Supported in FF 75+ and Chrome 77+ (no Safari yet) but not important enough
to bother with javascript complexity.

diff --git a/widget/reply.php b/widget/reply.php
index 0a0e4e55848f275380f7a3d97ef910382e0545e7..4da0ffa884e317fdc1706766cd60f1a2c57120f7 100644 (file)
--- a/widget/reply.php
+++ b/widget/reply.php
@@ -86,13 +86,19 @@ $query = $Db->query("SELECT $cols FROM comments WHERE page = ? ORDER BY created"
 
 print '<ul class="replies">';
 
+$imagecount = 0;
 while ($row = $query->fetch()) {
        $rowuser = new User("profile/{$row->author}");
        printf('<li id="%d">', $row->id);
        printf('<strong>%s</strong> <small class=date>%s</small>',
                $rowuser->html, showdate(preg_split('/\D/', $row->created))
        );
-       printf("<blockquote>\n%s</blockquote>\n", $row->message);
+       if ($html = $row->message) {
+               $html = preg_replace('/(?<=<img )/',
+                       $imagecount > 2 ? 'loading="lazy" ' : '', $html, -1, $found);
+               $imagecount += $found;
+               printf("<blockquote>\n%s</blockquote>\n", $html);
+       }
        if ($changes = json_decode($row->journal)) {
                print '<ul>';
                foreach ($changes as $change) {