JSFiddle - React, Tailwind, and code Playground

by Cory Danielson

HTML

<aside>
    <div class="catpicDiv"></div>
    <div class="catpicDiv"></div>
    <div class="catpicDiv"></div>
</aside>

<!-- small images, no need to hide the src in data-src -->
<img src="http://icons.iconarchive.com/icons/fasticon/ifunny/128/dog-icon.png" />
<img src="http://fc00.deviantart.net/fs42/f/2009/138/1/d/free_giraffe_icon_by_cremecake.gif" />

<!-- only load largeImages if it's a 750px+ width screen -->
<img src="" class="largeImage" data-src="http://www.marketingpilgrim.com/wp-content/uploads/2009/05/google-cat.png" />
<img src="" class="largeImage" data-src="http://www.dailyworldfacts.com/wp-content/uploads/2011/05/giraffe-facts-giraffe.jpg" />

CSS

aside {
    display: none;
}

/* Pictures won't load until these conditions are met */
@media screen and (min-width: 750px) {
  aside {
      display: block;
  }
    
  .catpicDiv {
    height: 100px;
    width: 100px;
    display: inline-block;
    border: 1px solid red;
    background-image: url('http://img2.timeinc.net/health/images/slides/poodle-1-400x400.jpg');
    background-size: cover;
  }

  .largeImage {
      display: inherit;
  }
}

JavaScript

function loadAllTheImages() {
    $("img.largeImage").each(function(){
        $(this).attr('src', $(this).attr('data-src'));
    });
}

$(window).load(function(){
    if ( $(window).width() > 750 ) {
        loadAllTheImages(); // !
    } else {
        $("body").append("<br /> <a id='mobileCheck' href='javascript: void(0);'>I GOT 4G, LEMME HAVE EM</a>");
    }
});

$(document).ready(function(){
    $('body').prepend("<h1>" + $(window).width().toString() + "</h1>");
    $('body').on('click', '#mobileCheck', function(){
        loadAllTheImages(); // !
        $("#mobileCheck").remove();
    });
});