Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Lazy load or another thing to load image when they see it  (Read 22271 times)

0 Members and 1 Guest are viewing this topic.

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Lazy load or another thing to load image when they see it
« on: November 08, 2019, 01:30:32 am »

Yup the title, I just want to improve the loading times on mobile phones.
I hope that there is something like that. Thank u

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #1 on: November 08, 2019, 04:08:41 am »

You want it for the image page or for the thumbnails page?
Anyway is possible and I will help you.

Logged

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Lazy load or another thing to load image when they see it
« Reply #2 on: November 08, 2019, 04:13:13 am »

You want it for the image page or for the thumbnails page?
Anyway is possible and I will help you.

For the index / thumbnail page

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #3 on: November 08, 2019, 04:23:14 am »

Can I post the code tomorrow.
Now I'm a little busy.
Give me 24h.
Your gallery is http://twwcaps.paperbuildings.net/gallery/ ?
I need to inspect it with firefox to help you better.
« Last Edit: November 08, 2019, 05:07:21 pm by allvip »
Logged

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Lazy load or another thing to load image when they see it
« Reply #4 on: November 08, 2019, 04:37:57 am »

Nope, it is https://mabelphotos.net/

Thank yoyu so much! I'll be waiting

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #5 on: November 08, 2019, 04:46:08 pm »

Now only the images that fit in the screen will load.
As the user scrolls, the next images will load.


STEP 1

open your_theme_name/template.html

and paste down before </body>

Code: [Select]
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script>
lazyload();
</script>

STEP 2

Paste in your_theme_name/theme.php function $template_thumbnail_view and theme_display_thumbnails

ATTENTION If those two functions are already in your theme.php then I need to tell you the edits to make.
Small edits. Don't worry.

PASTE

Code: [Select]
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails " width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="{THUMB-DATA-SRC}" />
</a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - START
******************************************************************************/
function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb', $date='')
{
    global $CONFIG, $CURRENT_ALBUM_DATA;
    global $template_thumb_view_title_row,$template_fav_thumb_view_title_row, $lang_thumb_view, $lang_common, $template_tab_display, $template_thumbnail_view, $lang_album_list, $lang_errors;

    $superCage = Inspekt::makeSuperCage();

    static $header = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $row_separator = '';
    static $footer = '';
    static $tabs = '';
    static $spacer = '';

    if ($header == '') {
        $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
        $tabs = template_extract_block($template_thumbnail_view, 'tabs');
        $header = template_extract_block($template_thumbnail_view, 'header');
        $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        $row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
        $footer = template_extract_block($template_thumbnail_view, 'footer');
        $spacer = template_extract_block($template_thumbnail_view, 'spacer');
    }

    $cat_link = is_numeric($aid) ? '' : '&amp;cat=' . $cat;
    $date_link = $date=='' ? '' : '&amp;date=' . $date;
    if ($superCage->get->getInt('uid')) {
      $uid_link = '&amp;uid=' . $superCage->get->getInt('uid');
    } else {
      $uid_link = '';
    }

    $album_types = array(
        'albums' => array('lastalb')
    );
    $album_types = CPGPluginAPI::filter('theme_thumbnails_album_types', $album_types);

    $theme_thumb_tab_tmpl = $template_tab_display;

    if ($mode == 'thumb') {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => in_array($aid, $album_types['albums']) ? $lang_album_list['album_on_page'] : $lang_thumb_view['pic_on_page']));
        $theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $date_link . $uid_link . '&amp;page=%d'));
    } else {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_thumb_view['user_on_page']));
        $theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'index.php?cat=' . $cat . '&amp;page=%d'));
    }

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['thumbcols']) . '%';

    $tabs_html = $display_tabs ? create_tabs($nbThumb, $page, $total_pages, $theme_thumb_tab_tmpl) : '';

    if (!GALLERY_ADMIN_MODE && stripos($template_thumb_view_title_row, 'admin_buttons') !== false) {
        template_extract_block($template_thumb_view_title_row, 'admin_buttons');
    }
    // The sort order options are not available for meta albums
    if ($sort_options) {
        if (GALLERY_ADMIN_MODE) {
            $param = array(
                '{ALBUM_ID}'   => $aid,
                '{CAT_ID}'     => ($cat > 0 ? $cat : $CURRENT_ALBUM_DATA['category']),
                '{MODIFY_LNK}'     => $lang_common['album_properties'],
                '{MODIFY_ICO}'     => cpg_fetch_icon('modifyalb', 1),
                '{PARENT_CAT_LNK}' => $lang_common['parent_category'],
                '{PARENT_CAT_ICO}' => cpg_fetch_icon('category', 1),
                '{EDIT_PICS_LNK}'  => $lang_common['edit_files'],
                '{EDIT_PICS_ICO}'  => cpg_fetch_icon('edit', 1),
                '{ALBUM_MGR_LNK}'  => $lang_common['album_manager'],
                '{ALBUM_MGR_ICO}'  => cpg_fetch_icon('alb_mgr', 1),
            );
        } else {
            $param = array();
        }
        $param['{ALBUM_NAME}'] = $album_name;
        // Plugin Filter: allow plugin to modify or add tags to process
        $param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
        $title = template_eval($template_thumb_view_title_row, $param);
    } elseif ($aid == 'favpics' && $CONFIG['enable_zipdownload'] > 0) { //Lots of stuff can be added here later
        $param = array(
            '{ALBUM_ID}'   => $aid,
            '{ALBUM_NAME}' => $album_name,
            '{DOWNLOAD_ZIP}' => cpg_fetch_icon ('zip', 2) . $lang_thumb_view['download_zip'],
        );
        // Plugin Filter: allow plugin to modify or add tags to process
        $param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
        $title = template_eval($template_fav_thumb_view_title_row, $param);
    } else {
        $title = $album_name;
    }

    CPGPluginAPI::action('theme_thumbnails_wrapper_start', null);

    if ($mode == 'thumb') {
        starttable('100%', $title, $thumbcols);
    } else {
        starttable('100%');
    }

    $header = CPGPluginAPI::filter('theme_thumbnails_header', $header);
    echo $header;

    $i = 0;
    global $thumb;  // make $thumb accessible to plugins
    foreach($thumb_list as $thumb) {
        $i++;
/**************************** CODE FOR LAZY LOAD *********************************/
$thumbImg = $thumb['image'];
preg_match('(<img[^>]* src=\"([^\"]*)\"[^>]*>)', $thumbImg, $matchesImg);
$thumbFilePath = $CONFIG['site_url'] . $matchesImg[1];
if (!isset($thumb['data_src'])) { $thumb['data_src'] = $thumbFilePath; }
/**************************** CODE FOR LAZY LOAD *********************************/
        if ($mode == 'thumb') {
            if (in_array($aid, $album_types['albums'])) {
                $params = array(
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}'   => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}'      => $thumb['image'],
// {THUMB-DATA-SRC} for LAZY LOAD
                    '{THUMB-DATA-SRC}' => $thumb['data_src'],
                    '{CAPTION}'    => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                );
            } else {
                // determine if thumbnail link targets should open in a pop-up
                if ($CONFIG['thumbnail_to_fullsize'] == 1) { // code for full-size pop-up
                    if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
                       $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');';
                    } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
                        $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');';
                    } else {
                       $target = 'javascript:;" onclick="MM_openBrWindow(\'displayimage.php?pid=' . $thumb['pid'] . '&fullsize=1\',\'' . uniqid(rand()) . '\',\'scrollbars=yes,toolbar=no,status=no,resizable=yes,width=' . ((int)$thumb['pwidth']+(int)$CONFIG['fullsize_padding_x']) .  ',height=' .   ((int)$thumb['pheight']+(int)$CONFIG['fullsize_padding_y']). '\');';
                    }
                } elseif ($aid == 'random') {
                    $target = "displayimage.php?pid={$thumb['pid']}$uid_link#top_display_media";
                } elseif ($aid == 'lastcom' || $aid == 'lastcomby') {
                    $page = cpg_get_comment_page_number($thumb['msg_id']);
                    $page = (is_numeric($page)) ? "&amp;page=$page" : '';
                    $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link&amp;msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
                } else {
                    $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link#top_display_media";
                }
                $params = array(
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}'   => $target,
                    '{THUMB}'      => $thumb['image'],
// added {THUMB-DATA-SRC} for LAZY LOAD
                    '{THUMB-DATA-SRC}' => $thumb['data_src'],
                    '{CAPTION}'    => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                );
            }

        } else {  // mode != 'thumb'

            // Used for mode = 'user' from list_users() in index.php
            $params = array(
                '{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}'   => "index.php?cat={$thumb['cat']}",
                '{THUMB}'      => $thumb['image'],
// added {THUMB-DATA-SRC} for LAZY LOAD
                '{THUMB-DATA-SRC}' => $thumb['data_src'],
                '{CAPTION}'    => $thumb['caption'],
                '{ADMIN_MENU}' => '',
            );

        }

        // Plugin Filter: allow plugin to modify or add tags to process
        $params = CPGPluginAPI::filter('theme_display_thumbnails_params', $params);
        echo template_eval($thumb_cell, $params);

        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
    } // foreach $thumb

    unset($thumb);  // unset $thumb to avoid conflicting with global

    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }
    $footer = CPGPluginAPI::filter('theme_thumbnails_footer', $footer);
    echo $footer;

    if ($display_tabs) {
        $params = array(
            '{THUMB_COLS}' => $thumbcols,
            '{TABS}'       => $tabs_html,
        );
        echo template_eval($tabs, $params);
    }

    endtable();
    CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
    echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/
« Last Edit: November 08, 2019, 08:30:25 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #6 on: November 08, 2019, 04:55:38 pm »

The edits I made in the code for step 1 are

REPLACE {THUMB} with

Code: [Select]
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="{THUMB-DATA-SRC}" />

add

Code: [Select]
/**************************** CODE FOR LAZY LOAD *********************************/
$thumbImg = $thumb['image'];
preg_match('(<img[^>]* src=\"([^\"]*)\"[^>]*>)', $thumbImg, $matchesImg);
$thumbFilePath = $CONFIG['site_url'] . $matchesImg[1];
if (!isset($thumb['data_src'])) { $thumb['data_src'] = $thumbFilePath; }
/**************************** CODE FOR LAZY LOAD *********************************/

AND pasted 3 times

Code: [Select]
// {THUMB-DATA-SRC} for LAZY LOAD
'{THUMB-DATA-SRC}' => $thumb['data_src'],

It works fine.
I tested only on my pc.

For step 1, you can download Lazy Load from https://github.com/tuupola/lazyload/tree/2.x and and upload in your_theme_name just lazyload.min.js from the zip archive

change

Code: [Select]
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>

WITH

Code: [Select]
<script src="{THEME_DIR}lazyload.min.js"></script>


« Last Edit: November 08, 2019, 05:06:20 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #7 on: November 08, 2019, 09:32:56 pm »

With Firefox inspect the rows that are not showing in the browser window have src gif 1x1px and the ones in view have src the real thumbnail.
Logged

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Lazy load or another thing to load image when they see it
« Reply #8 on: November 09, 2019, 05:17:46 pm »

Thank you so so much
I've been very busy lately that is why this is such a late response but thank u thank u

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
Re: Lazy load or another thing to load image when they see it
« Reply #9 on: November 09, 2019, 05:25:42 pm »

If I can find some time, I will create a lazy-load plugin so it can work with all themes.
Logged

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Lazy load or another thing to load image when they see it
« Reply #10 on: November 09, 2019, 05:32:21 pm »

If I can find some time, I will create a lazy-load plugin so it can work with all themes.

That would be amazing! I'm looking forward to seeing this

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #11 on: November 09, 2019, 05:39:12 pm »

If I can find some time, I will create a lazy-load plugin so it can work with all themes.

 8)
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Lazy load or another thing to load image when they see it
« Reply #12 on: December 11, 2019, 05:20:23 pm »

Instead of using the code in this topic, use Lazy load plugin by ron4mac.

https://forum.coppermine-gallery.net/index.php/topic,80011.0.html
Logged
Pages: [1]   Go Up
 

Page created in 0.03 seconds with 20 queries.