Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
10/16/2020 06:02:01 AM (8 months ago)
Author:
r-a-y
Message:

Add lazy loading support for images and iframes.

In order to take advantage of native browser support for lazy loading,
this commit adds the 'loading="lazy"' attribute to all <img> and
<iframe> elements used throughout BuddyPress (activity content,
private messaging content and avatar display).

The generic function, bp_core_add_loading_lazy_attribute(), is
introduced to help with this.

A special case is made for WordPress post embeds. As of this commit,
only Chromium-based browsers (77+) support iframe lazy loading if the
iframe is visible on load. (See https://web.dev/iframe-lazy-loading/#iframe-specific-lazy-loading-behavior.)
Since WordPress post embeds uses inline CSS to hide their iframe on
initial load, we need to remove their inline CSS so lazy loading can
be properly applied.

Props r-a-y, imath.

Fixes #8340.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/bp-core-filters.php

    r12678 r12757  
    5959add_filter( 'bp_email_set_content_plaintext', 'wp_strip_all_tags', 6 );
    6060add_filter( 'bp_email_set_subject', 'sanitize_text_field', 6 );
     61
     62// Avatars.
     63add_filter( 'bp_core_fetch_avatar', 'bp_core_add_loading_lazy_attribute' );
    6164
    6265/**
     
    901904
    902905/**
     906 * Add 'loading="lazy"' attribute into images and iframes.
     907 *
     908 * @since 7.0.0
     909 *
     910 * @string $content Content to inject attribute into.
     911 * @return string
     912 */
     913function bp_core_add_loading_lazy_attribute( $content = '' ) {
     914    if ( false === strpos( $content, '<img ' ) && false === strpos( $content, '<iframe ' ) ) {
     915        return $content;
     916    }
     917
     918    $content = str_replace( '<img ',    '<img loading="lazy" ',    $content );
     919    $content = str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
     920
     921    // WordPress posts need their position absolute removed for lazyloading.
     922    $find_pos_absolute = ' style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" ';
     923    if ( false !== strpos( $content, 'data-secret=' ) && false !== strpos( $content, $find_pos_absolute ) ) {
     924        $content = str_replace( $find_pos_absolute, '', $content );
     925    }
     926
     927    return $content;
     928}
     929
     930/**
    903931 * Should BuddyPress load the mentions scripts and related assets, including results to prime the
    904932 * mentions suggestions?
Note: See TracChangeset for help on using the changeset viewer.