Lofesa commented on issue #1663: Chrome's Native Lazy Loading
URL: 
https://github.com/apache/incubator-pagespeed-ngx/issues/1663#issuecomment-531503659
 
 
   Hi @jmarantz 
   No, the beacon to "see" if the image is or not above the fold is not needed 
when the browser can do the lazyload work. As far as I know this, is the 
browser who decides when the image is loaded. The loading attribute mus be set 
allways, then if the browser is capable to do the lazyload it decides what 
images to load and when.
   So we need to set `loading=lazy` allways, if not present, and test if the 
browser is capable or not, if not, we need to do all the work for lazyload the 
image.
   Is a similar thing as if the image has data-src, if the image has it we do 
nothing to lazyload the image as far as we know other lazyload software is 
present.
   We can test the browser capability by 2 ways, have a whitelist of UA ( at 
the moment only chrome version > 76 ) or asking to the browser.
   The 1st way need to do a maintenance of the whitelist, adding versions and 
browser that support this feature.
   The 2snd, way is making a big if in the javascript snipet, if browser is 
capable or if not.
   Some like:
   ```
   if ('loading' in HTMLImageElement.prototype) {
     // supported in browser
   } else {
     // fetch polyfill/third-party library
   }
   ```
   If supported in browser we need to copy data-src and data-srcset to src and 
srcset in all images. If not we need to do all the work that the actual 
javascript snipet do.
   
   Maybe a 3rd way, set the browser capability in a beacon and do things in the 
server side.
   
   Hope all this is well expressed.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

Reply via email to