jQuery addClass example

Change class name on click in jQuery

HTML

<div id="products">
  <div class="product">
    <div class="thumbnail">
      <img src="http://placehold.it/600x600" alt="">
    </div>
  </div>
  <div class="product">
    <div class="thumbnail">
      <img src="http://placehold.it/800x800" alt="">
    </div>
  </div>
</div>

SCSS

.product {
  float: left;
  border: 5px solid red;
  &.loaded {
    border-color: green;
  }
  img {
    width: 25%
  }
}

JavaScript

var container;
var img;

    $("#products .thumbnail").each(function(){
        container = $(this);
        img = new Image();
        img.src = $(container).find('img').attr('src');
        img.onload = function(){
            $(container).addClass('loaded');
        }
    });