[Support request] Lazy Loading Images WITH Placeholder (to stop 'clunky' loading)

Home Forums Support [Support request] Lazy Loading Images WITH Placeholder (to stop 'clunky' loading)

Home Forums Support Lazy Loading Images WITH Placeholder (to stop 'clunky' loading)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #715502
    culpable

    Hi,

    First off: LOVE this theme. Found it last week. Best $49 I’ve ever spent. Love love love it. Gives me lots of customisation, is super fast, and the support forum has been very helpful in answering my questions. This particular query is the first one I couldn’t find an existing answer to.

    To my question: I’m struggling to implement lazy loading of images with placeholder images/padding (anything to prevent the page ‘jumping’ as the image loads) .

    Requirements:
    – I’m trying to implement lazy loading with placeholder images
    – The header image must NOT be lazy loaded (i.e. stuff ‘above the fold’)
    – I can not use jQuery
    – I can not manually type in the dimensions of each image (i.e. can not use this method here). To clarify: this method is fine if it’s automatic, but not if I have to type in the length/with of the image beforehand (it should be done dynamically on page load)

    Progress:
    – I have successfully implemented lazy loading using this plugin (#1) and this plugin (#2).
    – Even though I like plugin #2 more (smaller file size), I’ve gone with plugin #1 because I could not figure out how to disable lazy loading on featured images with plugin #2. They have a guide here, but I’m a php noob so I couldn’t figure it out (I don’t know where I’m supposed to add it). That said, I’m pretty sure the classes we are targeting for the single-post blog featured image is “featured-image page-header-image-single”. So if you could help me out with this too, that would be swell.
    – Currently the site is being lazy loaded and the featured blog image is being excluded (albeit with a slightly larger plugin), BUT there is no placeholder image, so it’s “clunky” as it loads.

    Guides/Methods:
    Either of the below methods would work well for me: so long as it’s scalable (i.e. not manually calculating padding with each post) and without jQuery (i.e. fast).
    – LQIP (Low Quality Image Placeholder) or Dominant color placeholder, outlined here
    – Medium-style image loading, outlined here
    – Blur-up effect (here, similar to above)
    – Basic grey padding method, as discussed here #1; here #2; and here #3. You can also see an example of it working on this page. BUT, it needs to be done automatically/dynamically (it’s too tedious to type in the % padding for every image)

    Sorry for the long post – but I thought more information was better than less. Please advise me on the best way to go about this.

    I definitely think that it’s possible, but my noob PHP skills are letting me down. Currently on GP Premium 1.7.3 (although happy to upgrade if that helps).

    Thank you in advanced for any help you can provide!

    GP Premium 1.7.3
    #716029
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not seeing any “clunkiness” when the images load – they seem to be fading in pretty nicely as I scroll down the page.

    Have you asked the plugin author about the ability to add a placeholder to the plugin?

    Lazy loading for the blog is something we’re looking at implementing in GPP 1.8.

    #716036
    culpable

    Hi Tom,

    Thank you for taking the time to answer my question mate.

    In response:
    – Awesome to hear you’re looking at implementing it in 1.8!!
    – No, I haven’t asked the author. I was hoping that between our heads we could do it. Maybe using existing solutions with a bit of php?
    – You’re right: all but the featured images (which I’ve excluded as it’s above the fold) aren’t loading ‘clunky’. So, I would only need to implement this on the featured image at the top of the page. Is there any way to get the width/height dimensions of an image using php/JS?
    – Where would I run this code to “Disabling LazyLoad on an image class”? Excuse my php ignorance.

    And last question Tom: can you direct me to any good php resources? You’re clearly a gun at it so I’d value you insight. I’m good with HTML/CSS/ + basic JavaScript and have avoided WP in the past due to the difficulty in getting things “just right”. Finding your theme I now think it’s worth moving most of my sites to WP (and starting them in WP).

    #716589
    Tom
    Lead Developer
    Lead Developer

    Implementing a lazy load script would require a decent amount of customization – a bit too much for the forum here.

    You can get the width and height of the featured image with some PHP: https://wordpress.stackexchange.com/a/18339/90661

    So:

    $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
    
    $width = $image_data[1];
    $height = $image_data[2];

    Codecademy is a good resource for all kind of code learning, including PHP 🙂

    #716850
    culpable

    Okay that’s fair enough Tom.

    More specifically then do you mind assisting me with:
    – Where I would run this code to “Disabling LazyLoad on an image class”?
    – How I would apply a particular class to certain images on the site?

    And cheers! I’ll check out Codecademy 🙂

    #716887
    Tom
    Lead Developer
    Lead Developer

    The way they do it is kind of weird. I suppose you could try this:

    function rocket_lazyload_exclude_class( $attributes ) {
    	$attributes[] = 'class="attachment-';
    
    	return $attributes;
    }
    add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

    To apply a class to images in your content, you’d have to go into the HTML and add the class to the class="" attribute.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.