https://github.com/wp-digital/wp-hybrid-lazy-loading

A Progressive Migration To Native Lazy Loading.
https://github.com/wp-digital/wp-hybrid-lazy-loading

Last synced: about 1 month ago
JSON representation

A Progressive Migration To Native Lazy Loading.

• Host: GitHub
• URL: https://github.com/wp-digital/wp-hybrid-lazy-loading
• Owner: wp-digital
• Created: 2019-08-29T12:00:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T04:36:43.000Z (almost 2 years ago)
• Last Synced: 2024-09-18T05:57:27.974Z (4 months ago)
• Language: PHP
• Homepage:
• Size: 1.06 MB
• Stars: 0
• Watchers: 13
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hybrid Lazy Loading

### Description

A Progressive Migration To Native Lazy Loading.

The idea of plugin is to use [Native Lazy Loading](https://web.dev/native-lazy-loading) when

browser [supports](https://caniuse.com/#search=lazy%20loading) it and for all others implements 

lazy loading through [lazysizes](https://github.com/aFarkas/lazysizes) library that loads only

when needed.

Plugin adds **loading** attribute for all attachments, oEmbed iframes, images and iframes that 

are inserted to content through editor, also CSS class **lazyload** adds to those elements as well

as **data-src**, **data-srcset** and **data-sizes** are created from corresponding attributes.

## Installation

Clone this repo to `wp-content/plugins/`:

````

cd wp-content/plugins/

git clone [email protected]:innocode-digital/wp-hybrid-lazy-loading.git

````

or use [Composer](https://getcomposer.org/) for that.

Activate **Hybrid Lazy Loading** from Plugins page 

or [WP-CLI](https://make.wordpress.org/cli/handbook/): `wp plugin activate wp-hybrid-lazy-loading`.

## Documentation

By default plugin loads [lazysizes](https://github.com/aFarkas/lazysizes) lazily, which means only 

for ones that are w/o [Native Lazy Loading](https://web.dev/native-lazy-loading) support but it's 

possible to change this behaviour with filter: 

```

add_filter( 'innocode_wp_hybrid_lazy_loading_lazy_enqueue_lazysizes', '__return_false' ); // Default is "true"

```

It makes sense when e.g. [lazysizes](https://github.com/aFarkas/lazysizes) is using also for other

functionality.

---

By default CSS class "lazyload" removes from elements in browsers with 

[Native Lazy Loading](https://web.dev/native-lazy-loading) support but it's possible to change 

this behaviour with filter: 

```

add_filter( 'innocode_wp_hybrid_lazy_loading_force_use_lazysizes', '__return_true' ); // Default is "false"

```

It makes sense when e.g. it's needed to use 

[lazysizes CSS classes](https://github.com/aFarkas/lazysizes#css-api) that are adding to element 

during loading process in all browsers.

---

By default all attachments are loading lazily but it's possible to change this behaviour with 

filter:

```

add_filter( 'innocode_wp_hybrid_lazy_loading_attachment_loading', function ( $type, $attachment_id ) {

    $type = 'eager'; // Default is "lazy"

    

    return $type;

}, 10, 2 );

```

It makes sense when e.g. featured image should be loaded immediately.

---

If there are images and iframes that are rendered in PHP code of theme or plugin and they should

be loaded lazily, it's possible to use next methods:

```

/**

 * Adds "loading" attribute and "lazyload" CSS class to images in HTML code

 *

 * @param string $html

 * @return string

 */

\Innocode\WPHybridLazyLoading\DOM::images( $html );

/**

 * Adds "loading" attribute and "lazyload" CSS class to iframes in HTML code

 *

 * @param string $html

 * @return string

 */

\Innocode\WPHybridLazyLoading\DOM::iframes( $html );

/**

 * Adds "loading" attribute and "lazyload" CSS class to elements in HTML code by tag

 *

 * @param string $tag

 * @param string $html

 * @return string

 */

\Innocode\WPHybridLazyLoading\DOM::elements( $tag, $html );

```