On page if I include a hyperlink tag like this:

<a href="#">
  <img class="card-img-top" src="placeholder.jpg" alt="">
</a>   

Then jQuery is not removing thumbnail-loader div. I provided the HTML / jQuery what I am using above.

<div class="col-md-4 col-sm-6 mb-4">
  <div class="card card-list h-100">
    <div class="card-img thumbnail-loading">
      <a href="#">
        <div class="love-badge text-danger">
          <i class="mdi mdi-heart-outline"></i></a>
      <span class="trust badge-success">CONTENT</span>
      <span class="feature badge-warning">CONTENT</span>
      <span class="badge badge-primary">CONTENT</span>
      <div class="thumbnail-loader">
        <span class="ico ico-spinner-alt-2 ico-rotate"></span>
        <span class="loading-text">Loading</span>
      </div>
      <a href="#">
        <img class="card-img-top" src="placeholder.jpg" alt="">
      </a>
      </div>
      <div class="card-body">
        <h2 class="text-primary mb-2 mt-0">
          <a href="#">TITTLE</a> <small></small>
        </h2>
        <h6 class="card-subtitle mt-1 mb-0 text-muted"><i class="mdi mdi-currency-usd"></i> <strong></strong></h6>
      </div>
      <div class="card-footer">
        <span><i class="mdi mdi-thumb-up"></i> <strong></strong></span>
        <span><i class="mdi mdi-thumb-down"></i> <strong></strong></span>
      </div>
    </div>
  </div>
</div>
jQuery(function($) {
  $(document).ready(function() {
    $('.thumbnail-loading img').unveil(200, function() {
      $(this).load(function() {
        $(this).prev('.thumbnail-loader').remove();
        $(this).parent().removeClass('thumbnail-loading');
      });
    });
  })
});

0 Answers