yall.js as a fallback for native loading="lazy" about yall.js

[daytonlowell]

WebKit is working on it. https://bugs.webkit.org/show_bug.cgi?id=196698

[malchata]

Thanks for this, @panablue.

At current, my strategy is no fallback. I considered writing a new version of yall to try and dovetail with native lazy loading, but the more I think it over, the more I'm convinced that one of two strategies should be adopted:

1. If one wants full coverage across browsers for native lazy loading, then using a JavaScript-based solution (yall or otherwise) in the documented fashion might be preferable to juggling both it and native lazy loading.
2. If one wants native lazy loading, progressive enhancement is preferable. Browsers that can support it will use it, those that don't, won't.

Native lazy loading is currently supported for images and iframes in nearly 63% of browsers at the time of this writing. As Edge creeps forward with adoption of Chromium, and Firefox appears to show interest in implementation, I'm less inclined to believe we should be pressing forward with userland solutions like this. I believe they ultimately hold the platform back, and introduce unnecessary complexity in applications in the presence of a simpler, more robust platform-provided solution.

[panablue]

@malchata Just going with one or the other certainly keeps it simple. Depending on the region and site-specific audience (prevalence of iOS, etc) I suppose sticking with a JS solution for now probably covers the most users.

If it's useful to anyone, this is a simple snippet I put together for a recent project that didn't need support for srcset or CSS background images. It removes the data- prefix in browsers that support native loading="lazy" or dont' support IntersectionObserver (very old browsers) and falls back to IntersectionObserver for everything in between:

var lazyimages=document.querySelectorAll("img[data-src]"); if("IntersectionObserver"in window&&!("loading"in HTMLImageElement.prototype)){var imageObserver=new IntersectionObserver(function(entries,observer){entries.forEach(function(entry){if(entry.isIntersecting){var image=entry.target; image.src=image.dataset.src; image.removeAttribute("data-src"); imageObserver.unobserve(image)}})},{rootMargin:"500px 0px"}); lazyimages.forEach(function(image){imageObserver.observe(image)})}else{for(var i=0; i<lazyimages.length; i++){lazyimages[i].src=lazyimages[i].dataset.src; lazyimages[i].removeAttribute("data-src")}}

Used with HTML like:

<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20IMAGEWIDTHGOESHERE%20IMAGEHEIGHTGOESHERE'%3E%3C/svg%3E" data-src="REALIMAGEPATHGOESHERE" width="IMAGEWIDTHGOESHERE" height="IMAGEHEIGHTGOESHERE" alt="ALTTEXTGOESHERE" loading="lazy">