CrankShaft icon indicating copy to clipboard operation
CrankShaft copied to clipboard

built in polyfill for lazyloading

Open TheWebTech opened this issue 6 years ago • 1 comments

Lazyloading is popular, let's build in native lazyloading support into the framework. This means it will be light weight, un-opinionated. https://addyosmani.com/blog/lazy-loading/

TheWebTech avatar May 07 '19 21:05 TheWebTech

Chad Pierce posted this as a polyfill solution

(function() {
    if ("loading" in HTMLImageElement.prototype) {
      var lazyEls = document.querySelectorAll("[loading=lazy]");
      lazyEls.forEach(function(lazyEl) {
        lazyEl.setAttribute(
          "src",
          lazyEl.getAttribute("data-src")
        );
      });
    } else {
      // Dynamically include a lazy loading library of your choice
      // Here including vanilla-lazyload
      var script = document.createElement("script");
      script.async = true;
      script.src =
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js";
      window.lazyLoadOptions = {
        elements_selector: "[loading=lazy]"
        //eventually more options here
      };
      document.body.appendChild(script);
    }
})();```

TheWebTech avatar Jun 06 '19 21:06 TheWebTech