Issue
I am kind of newbie in website development, so kind of confused with the behavior of web page. I want to use loader to hide the image loading in the HTML. In index page I have used tabs view to show the product category and in every category, images are shown. So loading images is taking time and at first it shows all the product images of all categories which is not acceptable. I am talking about a section that is after slider.
<ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '.custom'}">
<li class="nav-item active" data-option-value=".custom"><a class="nav-link text-1 text-uppercase active" href="#">Custom Point of Sale Displays</a></li>
<li class="nav-item" data-option-value=".wide-format"><a class="nav-link text-1 text-uppercase" href="#">Wide Format printing</a></li>
<li class="nav-item" data-option-value=".digital"><a class="nav-link text-1 text-uppercase" href="#">Digital small Format</a></li>
<li class="nav-item" data-option-value=".mailing"><a class="nav-link text-1 text-uppercase" href="#">Mailing</a></li>
<li class="nav-item" data-option-value=".kitting"><a class="nav-link text-1 text-uppercase" href="#">Kitting & Distribution with Online Tracking</a></li>
</ul>
<div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2">
<div class="row portfolio-list sort-destination lightbox" data-sort-id="portfolio" data-plugin-options="{'delegate': 'a.lightbox-portfolio', 'type': 'image', 'gallery': {'enabled': true}}">
<!-- custom point of sales display-->
<div class="col-sm-6 col-lg-3 isotope-item custom">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/custom1.png" class="img-fluid border-radius-0" alt="">
<!-- <span class=" thumb-info-title thumb-info line-height-1">Project Title</span> -->
<span class="thumb-info-action">
<a href="img/gallery/custom1.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3 isotope-item custom">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/custom2.png" class="img-fluid border-radius-0" alt="">
<!-- <span class=" thumb-info-title thumb-info line-height-1">Project Title</span> -->
<span class="thumb-info-action">
<a href="img/gallery/custom2.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<!-- custom displays end-->
<!-- wide format starts-->
<div class="col-sm-6 col-lg-3 isotope-item wide-format">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/corflutes.png" class="img-fluid border-radius-0" alt="">
<span class=" thumb-info-title thumb-info line-height-1">Corflute Signs</span>
<span class="thumb-info-action">
<a href="img/gallery/corflutes.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3 isotope-item wide-format">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/screenboard.png" class="img-fluid border-radius-0" alt="">
<span class=" thumb-info-title thumb-info line-height-1">Screen Board Signs</span>
<span class="thumb-info-action">
<a href="img/gallery/screenboard.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3 isotope-item wide-format">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/economy.png" class="img-fluid border-radius-0" alt="">
<span class=" thumb-info-title thumb-info line-height-1">Economy Pull Up Banners</span>
<span class="thumb-info-action">
<a href="img/gallery/economy.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<!-- wide format ends-->
<!-- digital small format-->
<div class="col-sm-6 col-lg-3 isotope-item digital">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/doorhangers.png" class="img-fluid border-radius-0" alt="">
<span class=" thumb-info-title thumb-info line-height-1">Door Hangers</span>
<span class="thumb-info-action">
<a href="img/gallery/doorhangers.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3 isotope-item digital">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/businesscards.png" class="img-fluid border-radius-0" alt="">
<span class=" thumb-info-title thumb-info line-height-1">Business Cards</span>
<span class="thumb-info-action">
<a href="img/gallery/businesscards.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3 isotope-item digital">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/flyers.png" class="img-fluid border-radius-0" alt="">
<span class=" thumb-info-title thumb-info line-height-1">Flyers</span>
<span class="thumb-info-action">
<a href="img/gallery/flyers.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<!-- digital displays end-->
<!-- mailing -->
<div class="col-sm-6 col-lg-3 isotope-item mailing">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/mailing.png" class="img-fluid border-radius-0" alt="">
<span class="thumb-info-action">
<a href="img/gallery/mailing.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3 isotope-item mailing">
<div class="portfolio-item">
<span class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-no-borders-rounded thumb-info-lighten thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-centered-icons border-radius-0">
<span class="thumb-info-wrapper border-radius-0">
<img src="img/gallery/mailing2.png" class="img-fluid border-radius-0" alt="">
<span class="thumb-info-action">
<a href="img/gallery/mailing2.png" class="lightbox-portfolio">
<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-search text-dark"></i></span>
</a>
</span>
</span>
</span>
</div>
</div>
<!-- mailing ends-->
</div>
</div>
</div>
</div>
</div>
</section>
Solution
My first guess is that perhaps your client has not cleared his cache, and so is running old code. He can clear the cache by following these instructions.
If the above did not fix the problem:
This is a kludge, because I don't know your full HTML/javascript code, but:
Perhaps you can hide the section with the category images for a second or two, and then allow it to be displayed when appropriate:
.sort-destination-loader.sort-destination-loader-showing{display:none;}
and in javascript:
setTimeout(function(){
$('.sort-destination-loader.sort-destination-loader-showing').show();
},3000); //allow display after 3 seconds
If that works, then step-back the ,3000
until it is as short a delay as possible:
},500); //allow display after 1/2 second
Perhaps this would solve the problem temporarily while you are working on understanding the full problem?
Answered By - cssyphus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.