A Pen by Rplus.

custom-lazyload-invisible-image.markdown

custom lazyload invisible image

A Pen by Rplus on CodePen.

License.

index.jade

- books1 = [["Book A", 150], ["Book B", 99]]
- books2 = [["Book C", 50], ["Book D", 399]]
- books = [books1, books2]

mixin book(name, price)
  dl
    dt.books__name #{name}
    dd.books__pricw NT #{price} $
    dd.books__cover
      img.books__cover__img(data-src="//fakeimg.pl/150x100/?text=#{name}")

ul.books
  each cate, i in books
    li.books__category
      span.books__category__name category-#{i}
      each book in books[i]
        +book(book[0], book[1])

script.js

$(function() {
  var imgLoadedClass = 'is-img-loaded';
  var loadLazyImage = function (imgs) {
    $.each(imgs, function replaceSrc() {
      var _img = $(this);      
      _img.prop('src', _img.attr('data-src'))
    })
  };
  
  $('.books').on('click', '.books__category__name', function() {
    var _this = $(this),
        _category = _this.parent();
    _category.toggleClass('active');
    
    if (!_this.hasClass(imgLoadedClass)) {
      loadLazyImage(_category.find('.books__cover__img'));
      _category.addClass(imgLoadedClass);
    }
  });
});

style.stylus

.books__category {
  dl {
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    height: 0;
    /* display: none; */
  }
  
  &.active dl {
    height: auto;
    /* display: block; */
  }
}

.books__category__name {
  background-color: #eec;
  cursor: pointer;
}

.books__cover__img {
  transition: opacity .5s; 
  opacity: 0;
  
  .active & {
    opacity: 1;
  }
}