Improvement: Prevent reflow

  • Pratham

    (@pratham2003)


    6 years, 1 month ago

    Hi,

    Can you please look into the following article? It describes the problem in detail and also showcases the solution.
    https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

    It will help prevent a reflow when lazy loading responsive images.

    If the original image tag has a width and height attribute, these can be used to adjust the viewbox attribute in the svg, if the width and height attributes are missing, these can default to 1:1 (maybe modifiable by filters / backend setting).

Viewing 1 replies (of 1 total)
  • Thread Starter Pratham

    (@pratham2003)

    6 years, 1 month ago

    Sadly the a3_lazy_load_placeholder_url filter does not allow overriding the placeholder for a specific image tag.

    Other option is see is the a3_lazy_load_html_after filter.

    add_filter( 'a3_lazy_load_html_after',  function($content){
	// Parse and modify the img tag here
	return $content;
});

    If you could create a new filter which allows overriding the placeholder URL per image tag and passes the matched image tag to the handler, it would be great 🙂

    • This reply was modified 6 years, 1 month ago by Pratham.
Viewing 1 replies (of 1 total)

The topic ‘Improvement: Prevent reflow’ is closed to new replies.