JSFiddle - React, Tailwind, and code Playground

by Glenn Marks

HTML

<div style="height:150vh"></div>
<br />
<img class="G4LLazy" src="//www.garden4less.co.uk/images/whitepixel.png" data-src="//www.garden4less.co.uk/prodimages/hozelock/hozelock-40m-auto-reel.jpg">
<br />image here
<br />
<div style="height:150vh"></div>
<picture class="G4LLazy">
  <source type="image/webp" data-srcset="//www.garden4less.co.uk/homepage/spring-20/watering-hozelock-autoreel.webp 1x, //www.garden4less.co.uk/homepage/spring-20/watering-hozelock-autoreel-x2.webp 2x" />
  <source type="image/png" data-srcset="//www.garden4less.co.uk/homepage/spring-20/watering-hozelock-autoreel.png 1x" />
  <img src="//www.garden4less.co.uk/images/whitepixel.png" data-src="//www.garden4less.co.uk/homepage/spring-20/watering-hozelock-autoreel.png" />
</picture>
<!-- <br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="G4LLazy" data-src="//www.garden4less.co.uk/default.asp" data-post="nommy,bommy">No Stuff</div> -->

JavaScript

(function(e) {
  e.fn.G4LLoadMore = function(loadfrom, placeinto) {
    var
      postdata = {},
      postdatastring = (e(this).attr("data-post")) ? e(this).attr("data-post").split(",") : '',
      postdatasplit;
    for (var i = 0, len = postdatastring.length; i < len; i++) {
      postdatasplit = postdatastring[i].split(":"),
        postdata[postdatasplit[0]] = postdatasplit[1];
    }
    placeinto = (placeinto == 'this' || !placeinto) ? this : "#" + placeinto,
      e(placeinto).html("<div class=\"LoadingScroller\" />").load(loadfrom, postdata);
  };

  e.fn.G4LLazyLoad = function() {
    if (e("[data-src]")) {
      e(this).each(function() {
        var t = e(this)
        e(window).on("load scroll", function() {
          // console.log('Offsets', { CalcTop: e(window).scrollTop() + e(window).height() + 50, ThisTop: t.offset().top });
          //console.log(t);
          if (e(window).scrollTop() + e(window).height() + 50 >= t.offset().top) {
            if (t.is('picture') && t.children().first().attr("data-srcset")) {
              t.children().each(function(_, cp) {
                var c = e(cp);
                if (c.is('source')) {
                  c.attr("srcset", c.attr("data-srcset"));
                  c.removeAttr("data-srcset");
                } else if (c.is('img')) {
                  c.attr("src", c.attr("data-src"));
                  c.removeAttr("data-src");
                }
              });
            } else if (t.attr("data-src"))
              if (t.is('img')) {
                t.attr("src", t.attr("data-src"));
                t.removeAttr("data-src");
              } else if (
              ('isConnected' in Node.prototype) ?
              t.isConnected :
              !t.ownerDocument ||
              !(
                t.ownerDocument.compareDocumentPosition(t) &
                t.DOCUMENT_POSITION_DISCONNECTED
              )
            ) {
              t.G4LLoadMore(t.attr("data-src")/*, t.attr("data-replace")*/);
         ...