Lazy Images

Mauer Themes Support Stills Lazy Images

This topic contains 19 replies, has 4 voices, and was last updated by  Paul 1 month, 3 weeks ago.

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #2107

    Nico
    Participant

    Currently the theme pre-loads all images before displaying the page. This can take quite a long time for pages/projects with >20 images. Is there a way to change this behaviour and e.g. make use of Jetpack’s “Lazy Images” feature that lazy-loads images (only) shortly before being displayed?

    #2109

    Nico
    Participant

    Update: Lazy Image from Jetpack (and also other “Lazy Load” plugins) do work – however there are two problems:

    1. In Portfolio pages, when clicking the “load more” button, the feature images for the additional projects are not loaded anymore

    2. On Project pages or blog posts, captions act weird on lazy loaded images. The images are loaded fine, but the caption element still has “width: 1px” in the CSS.

    #2110

    Nico
    Participant

    … and:

    3. Using the 3 col airy layout, the vertical position of the images is not centered anymore for some Lazy Load plugins.

    I’m very happy with the theme so far, and I see that pre-loading images makes the user experience much smoother in many ways, but in my opinion, support for lazy loading images would make the experience so much better and saves a lot of bandwidth / speed.

    #2112

    Nico
    Participant

    Update 2: Using the “BJ Lazy Load” plugin and this additional script in the footer seems (!) to work, but is not very elegant.

    #2174

    Paul
    Keymaster

    Hello Nico,

    Great to know you figured this out.

    Can you please share what you find not very elegant about the “BJ Lazy Load” solution?

    Regards,
    Paul

    #2181

    Nico
    Participant

    Hi Paul!

    Well, it’s kind of a hack and leads to all captions being just one character wide before the images are loaded. You can observe this when scrolling faster than the images are loaded or on slow connections. It works great for my purposes, but could be improved in two ways:

    1. the BJ Lazy Load plugin should not replace the first X (maybe 5?) images; that way, the page load spinner would make sense again (currently, the spinner shows for a very short time, and after this, the images are loaded)

    2. the captions should have an initial width set.
    In the current solution, the captions have width: 0 (as the images are not loaded yet and their dimensions are not known). The width is corrected as soon as the image is loaded (that’s what the snipped above does), but if loading takes longer than scrolling, visitors see the captions as “one character per line” for a short time.

    I did not come up with a solution for 2., as I did not figure out if the theme knows the images sizes, or what width would be appropriate (maybe page width?)…

    #2242

    Paul
    Keymaster

    Nico,

    The captions don’t have an initial width. I think a good way to go here is to hide the captions and show them on BJ’s lazyloaded event.

    Currently, to speed up images loading, the demo uses Amazon CloudFront CDN, which is integrated with WP via the KeyCDN plugin.

    I plan on introducing lazy loading in one of the future updates.

    Regards,
    Paul

    #2250

    Nico
    Participant

    Thanks Paul!

    With some jQuery tree traversing magic I came up with this, what seems to do the job.

    
    
    if (typeof jQuery === 'function') {
        (function ($) {
            $(window).load(function(){
                var hiddenImg = $('.mauer-pswp-gallery-img img.lazy-hidden');
                hiddenImg.parents('figure').find('figcaption').hide();
                hiddenImg.on('lazyloaded', function() {
                    var width = $(this).width();
                    var caption = $(this).parent().parent().find('figcaption');
                    caption.width(width);
                    caption.show();
                });
            });
        })(jQuery);
    }
    
    

    The CDN may help to speed up image loading itself, but with slow connections and pages with lots of images, this does not really help, so I really wanted to avoid unnecessarily loading images.

    #2256

    Paul
    Keymaster

    Hi Nico,

    Glad to know you’ve figured out how to handle the captions. White magic =)

    Regards,
    Paul

    #3063

    im.xingway
    Participant

    Hi, Paul,

    I have the same issue. I think it’s a big problem for a photography theme. Please think about some optimizations on this, thanks.

    #3065

    Paul
    Keymaster

    Hi Im.Xingway,

    I’ll bring lazy images to this theme in a future release.

    Kind regards,
    Paul

    #3231

    tomsmith
    Participant

    Hi Paul,
    has this been included in the latest update? Really keen on this too, as for wedding galleries, it’s a little difficult at the moment. Many thanks.

    #3238

    im.xingway
    Participant

    desperately waiting for this feature, I have only about 10 pics in every album, and it takes quite a long time on the initial loading. Please make it happen in the next update. thanks.

    #3239

    Nico
    Participant

    Here is how to do this with the current version. Working example: https://kaiser.photo/proj/nodeconf-eu-2018/

    1. Install the “Insert Headers and Footers” Plugin: https://wordpress.org/plugins/insert-headers-and-footers/
    2. Install the “BJ Lazy Load” Plugin: https://wordpress.org/plugins/bj-lazy-load/
    3. In the plugin settings, insert this code into the “Scripts in Footer” section:
    
    
    if (typeof jQuery === 'function') {
        (function ($) {
            $(window).load(function(){
                var hiddenImg = $('.mauer-pswp-gallery-img img.lazy-hidden');
                hiddenImg.parents('figure').find('figcaption').hide();
                hiddenImg.on('lazyloaded', function() {
                    var width = $(this).width();
                    var caption = $(this).parent().parent().find('figcaption');
                    caption.width(width);
                    caption.show();
                });
            });
        })(jQuery);
    }
    
    
    #3241

    im.xingway
    Participant

    Hi Nico,

    Thanks for your kind help. I followed your steps but the ‘BJ Lazy Load’ plugin broke the layout, once I got it enabled. I just updated the theme and had the lastest wordpress version installed two days ago. maybe that’s reason your methods don’t work anymore.

    • This reply was modified 3 months, 3 weeks ago by  im.xingway.
    #3243

    im.xingway
    Participant

    Hi Nico,

    I figured it out by using another lazy loading plugin – ‘Lazy Load by WP Rocket’, it works fine with the captions and layout for now without adding any JS code.

    BUT, it still takes a bit long on first time loading, since there are too many JS files. The page will not show util everything is being loaded. somehow I can live with it now.

    #3247

    Nico
    Participant

    That’s strange, I use the latest version 1.0.9 of BJ Lazy Load https://wordpress.org/plugins/bj-lazy-load/

    #3388

    Paul
    Keymaster

    Nico, Imokya,

    Lazy loading support has been included into Stills. All the images are now being given placeholders of the same aspect ratio as the actual images that will appear in these placeholders. This enables to keep the layout consistent while lazy loading (which is the main challenge while making a website with dynamically-sized images lazy-loading-ready). The spinner hiding has been shifted to happen earlier in the loading sequence, which also contributes to serving the page to the user faster.

    The lazy loading is powered by the Jetpack Lazy Images module. As you probably know, Jetpack has been developed and is maintained by Automattic — the actual company behind WordPress itself. So it is well supported and is sure to stick around. I don’t see any reason to use any other lazy loading plugin and invite you to switch to Jetpack lazy loading. I recommend removing the lazy loading plugins you may have previously installed.

    You can see Stills lazy loading in action on the demo website here.

    To have lazy loading on your website, please do the following:

    1. Update the Stills theme (get the new version from the downloads page, deactivate and remove the old theme, install the new one, install/update the needed plugins).

    2. Go to Admin Panel > Jetpack > Settings and turn on ‘Enable Lazy Loading for Images’.

    I’ve also included this info into the User Guide (basically, it’s pretty much the same as here).

    Kind regards,
    Paul

    #3399

    Nico
    Participant

    Thanks Paul, the new update looks great and the aspect ratio calculation works like a charm! Using it with the Jetpack plugin, works perfectly! Thank you very much, and keep up the great work!

    #3540

    Paul
    Keymaster

    Nico,

    Great to know this has worked out fine for you.

    Regards,
    Paul

    • This reply was modified 1 month, 3 weeks ago by  Paul.
Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.