Support » Plugin: a3 Lazy Load » How to add lazy loading manually?

  • Hey,

    I’d like to know how can I add the lazy loading functionality of a3 lazy load manually. For example how would I add it to this code which is integrated into a page template on my site:
    <img class="some-class" src="source-of-my-image.png" />

    Thanks so much in advance for a reply!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Nobody able to help? Thanks in advance for any help!

    You must replicate what the plugin is doing with the <img/> tags in your content, basically putting it inside a <noscript> tag to make the images available for SEO indexing without JS, copy the attributes ‘data-‘ attributes and make the src point to the placeholder image.

    This is an example with just paths changed.

    
    <img class="lazy lazy-hidden" src="//example.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src=" https://example.com/wp-content/uploads/2016/06/picture.jpg" " alt="" /><noscript><img src="https://example.com/wp-content/uploads/2016/06/picture.jpg" alt="" /></noscript>
    

    Editing the templates is the most safe way to go if you want to change that. I use the plugin class to automatically transform contents like sidebars, but it requires you build another plugin so better leave that at this moment.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add lazy loading manually?’ is closed to new replies.