View Issue Details

IDProjectCategoryView StatusLast Update
0036690mantisbthtmlpublic2025-11-18 05:48
Reporterinfo@gritsch-soft.com Assigned To 
PrioritynormalSeverityfeatureReproducibilityalways
Status acknowledgedResolutionopen 
Product Version2.27.2 
Summary0036690: Add a global setting to disable lazy-loading of images.
Description

It would be great to have a (global) setting to disable the lazy loading of preview-images (that makes scrolling jumpy and with a fast internet-connection or in LAN eager loading would not be a problem).

Currently we are using the following patch to change it on every mantis-update:

diff --git a/core/print_api.php b/core/print_api.php
index 644df06..8f9cb36 100644
--- a/core/print_api.php
+++ b/core/print_api.php
@@ -2092,7 +2092,7 @@ function print_bug_attachment_preview_image( array $p_attachment ) {

    echo "\n<div class=\"bug-attachment-preview-image\">";
    echo '<a href="' . string_attribute( $p_attachment['download_url'] ) . '"' . print_attachment_link_target() . '>';
-   echo '<img src="' . string_attribute( $t_image_url ) . '" alt="' . string_attribute( $t_title ) . '" loading="lazy" style="' . string_attribute( $t_preview_style ) . '" />';
+   echo '<img src="' . string_attribute( $t_image_url ) . '" alt="' . string_attribute( $t_title ) . '" loading="eager" style="' . string_attribute( $t_preview_style ) . '" />';
    echo '</a></div>';
 }

Thank you for the great work!

TagsNo tags attached.

Relationships

related to 0027150 closedatrol Non visible image previews are transferred from server to client 

Activities

dregad

dregad

2025-11-16 18:42

developer   ~0070651

lazy loading of preview-images (that makes scrolling jumpy

Making lazy loading optional certainly is one way to deal with the shifting layout problem, but in my opinion eager loading of attachment previews it a waste of bandwidth regardless of how fast the connection is, which is the main reason why this was implemented in the first place (see 27150).

I believe it would be a much better fix to add appropriate width/height attributes to img tag, to ensure the display renders correctly sized placeholders, thus avoiding layout shifting. This could probably be achieved fairly easily using PHP's getimagesize() function - it even returns an appropriate pre-formatted string.

Let me know your thoughts.

info@gritsch-soft.com

info@gritsch-soft.com

2025-11-17 03:46

reporter   ~0070662

That would be a possible solution. But the info (size) should be stored in the DB to prevent a waste of CPU und Disk-acitivity (images need to be stored on disk to use with that function).
Its also more work to implement that than a simple setting.

dregad

dregad

2025-11-18 05:48

developer   ~0070664

the info (size) should be stored in the DB to prevent a waste of CPU und Disk-acitivity

True, for optimization it would be best to store width/height in DB when the attachment is uploaded.

images need to be stored on disk to use with that function

Not necessarily, there is also getimagesizefromstring(), which can take the contents of the BLOB when the attachment is stored in DB.

more work to implement that than a simple setting

Not so complex actually - here is a proof-of-concept (not integrating schema change and storage of size info) if you'd like to test it. Of course it's wasteful because multiple queries against bug_file table are made, and we're reading the image file from disk twice (once to get the size, and again to actually load the image), but it should work.

diff --git a/core/print_api.php b/core/print_api.php
index 1f1a3b8e6..b29f462de 100644
--- a/core/print_api.php
+++ b/core/print_api.php
@@ -2147,10 +2147,24 @@ function print_bug_attachment_preview_image( array $p_attachment ) {
        $t_title = file_get_field( $p_attachment['id'], 'title' );
        $t_image_url = $p_attachment['download_url'] . '&show_inline=1' . form_security_param( 'file_show_inline' );

-       echo "\n<div class=\"bug-attachment-preview-image\">";
+       # Image size
+       $t_content = file_get_content( $p_attachment['id'] );
+       if( empty( $t_content['content'] ) ) {
+               $t_size = '';
+       } else {
+               $t_size = getimagesizefromstring( $t_content['content'] );
+               $t_size = $t_size ? $t_size[3] : '';
+       }
+
+       echo PHP_EOL, '<div class="bug-attachment-preview-image">';
        echo '<a href="' . string_attribute( $p_attachment['download_url'] ) . '"' . print_attachment_link_target() . '>';
-       echo '<img src="' . string_attribute( $t_image_url ) . '" alt="' . string_attribute( $t_title ) . '" loading="lazy" style="' . string_attribute( $t_preview_style ) . '" />';
-       echo '</a></div>';
+       echo '<img src="' . string_attribute( $t_image_url )
+                       . '" alt="' . string_attribute( $t_title )
+                       . '" loading="lazy" '
+                       . $t_size
+                       . ' style="' . string_attribute( $t_preview_style )
+                       . '" />';
+       echo '</a>';
 }

 /**