[wp-trac] [WordPress Trac] #44427: Introduce lazy-loading API for media and other elements

[WordPress Trac]

#44427: Introduce lazy-loading API for media and other elements
----------------------------------------+------------------------------
 Reporter:  mor10                       |       Owner:  (none)
     Type:  feature request             |      Status:  new
 Priority:  normal                      |   Milestone:  Awaiting Review
Component:  Media                       |     Version:
 Severity:  normal                      |  Resolution:
 Keywords:  needs-unit-tests has-patch  |     Focuses:  performance
----------------------------------------+------------------------------

Comment (by birgire):

 Thanks for the patch @spacedmonkey

 It seems that lazy loading is currently used in plugins in various ways.

 I had a peek into the plugins directory:

 https://wpdirectory.net/search/01DJFY0YHPHJ76JWB6EW5SXCNK

 that contains image tags like:

 {{{
 <img data-src="...
 <img data-lazy-src="...
 <img data-lazyloaded="1"...
 <img data-flickity-lazyload="...
 <img data-gt-lazy-src="...
 <img data-lazy="...

 <img class="lazyload" ...
 <img class="lazy lazy-hidden" data-lazy-type="iframe" data-lazy-src="...
 <img class="supsystic-lazy" data-original="...
 <img class="rocket-lazyload-rocket-logo" ...
 <img class="lazy_load_image" ...
 <img class="owl-lazy" data-src="...
 <img class="ready-lazy" data-original="...
 <img class="lazy" data-original="...
 <img class="lazyOwl" ...
 <img class="listing lazy" data-original="...
 <img class="shopapp-lazy" data-original="...
 <img class="responsively-lazy" ...
 <img class="fullWidthfileImg lazy" data-original="...

 <img data-no-lazy="1" src=
 <img class="skip-lazy" src
 <img class="skip-lazy gmw-image"

 }}}

 Not all af these might be part of the content, but I wonder how mixing it
 with {{{loading="lazy"}}} will affect the already lazy loaded content
 images.

 If they can't mix, then more aggressive checks come to mind to avoid it.
 Rather than checking only for the {{{' lazy="'}}} as in
 [attachment:"44427.2.diff"], one could avoid replacements on images that
 contain {{{data}}} attributes for original, src, lazy, lazy-src, source,
 ... etc. But I think that might still miss out lot of other cases.
 (filterable?)

 Making the flag available to themes, rather than having it ON by default,
 sounds safer, at least to start with.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44427#comment:31>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform