wp-rocket-helpers icon indicating copy to clipboard operation
wp-rocket-helpers copied to clipboard

Disable lazy load on child elements

Open kalnode opened this issue 5 years ago • 0 comments

Your existing helper scripts are great! Thanks.

In the case of disable-lazy-loading-by-class...

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="divi-slider"';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

... sometimes you cannot access the class of the element directly.

For example, I'm trying to disable lazy loading on a specific background video generated by another plugin (a page builder). Using just the available page builder interface, I can control the class of the container, but no deeper than that.

The page builder generates a video instance like so, and I'm having trouble disabling lazy loading for the video specifically:


<div class="i_can_control_this">

    <!-- I don't have control over the child elements below. Either <video> or <source> (?) needs to have a class in order to target and disable lazy loading. -->

    <div class="section_video">
        <div class="mask"></div>
        <video poster="" autoplay="true" loop="true" muted="muted">
            <source type="video/mp4" src="https://mywebsite.com/wp-content/uploads/2019/10/bg-video.m4v">
        </video>
    </div>

</div>

It would be helpful if another helper was put together that allowed more advanced CSS targeting than simply by class alone. Like class + tag (".lazy-disable video").

kalnode avatar Oct 06 '19 19:10 kalnode