Manually lazy load images

  • Resolved daverosenburg

    (@daverosenburg)


    8 years, 4 months ago

    I’ve got some custom templates with imgs I’m trying to lazy load, but I’m not sure what the best way to do that is.

    Should I activate them like I would with the Lazy-Load-XT script? (I think I read this plugin is based off that?)

    Is there a better method?

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • frances2823

    (@frances2823)

    8 years, 4 months ago

    Hi I’m looking for a manuel implementation too.
    I load shortcodes which often contains pictures.
    Any ideas ?

    Thanks !

    frances2823

    (@frances2823)

    8 years, 4 months ago

    Problem solved !

    without lazyload :

    <img class="your-class" src="url-of-your-website/image.png" alt="image description" />

    with manual lazyload :

    <img class="your-class lazy-hidden" 
src="url-of-your-website/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" 
data-lazy-type="image" 
data-src="url-of-your-website/image.png" 
alt="image-description">
<noscript>
	<img class="your-class" 
	src="url-of-your-website/image.png" alt="image-description" />
</noscript>

    Cheers 🙂

    • This reply was modified 8 years, 4 months ago by frances2823.
    frances2823

    (@frances2823)

    8 years, 2 months ago

    This method is no longer working with the last version of the plugin (1.8.7) :-/

    Now it call first a placeholder :

    //mywebsite.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif and it load the image after scrolling.

    any idea ?

    • This reply was modified 8 years, 2 months ago by frances2823.
    frances2823

    (@frances2823)

    8 years, 2 months ago

    Here is the new trick from version 1.8.7 that works !

    
<img class="lazy-hidden" 
	src="<?php echo site_url(); ?>/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" 
	data-lazy-type="image" 
	data-src="<?php echo get_stylesheet_directory_uri(); ?>/images/my-image.png" 
	alt="my-image-description"
>
<noscript>
	<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my-image.png"
	alt="my-image-description" />
</noscript>

    Enjoy

    • This reply was modified 8 years, 2 months ago by frances2823.
    • This reply was modified 8 years, 2 months ago by frances2823.
    • This reply was modified 8 years, 2 months ago by frances2823.
    gilesbutler

    (@gilesbutler)

    8 years, 1 month ago

    I just updated and all my manually added images broke 🙁

    Thank you @frances2823 great fix!! 👍

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Manually lazy load images’ is closed to new replies.