我是网站开发的新手，对网页的行为有点困惑。 我想使用 loader 来隐藏 HTML 中的图像加载。在索引页面中，我使用选项卡 View 来显示产品类别，并且在每个类别中都显示了图像。所以加载图片很花时间，一开始它会显示所有类别的所有产品图片，这是 Not Acceptable 。我说的是 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>
最佳答案
我的第一个猜测是您的客户可能没有清除他的缓存，所以正在运行旧代码。他可以通过关注 these instructions 来清除缓存.
如果以上没有解决问题:
这是一个困惑，因为我不知道您的完整 HTML/javascript 代码，但是:
或许您可以将带有类别图片的部分隐藏一两秒钟，然后在适当的时候允许它显示:
.sort-destination-loader.sort-destination-loader-showing{display:none;}
在 javascript 中:
setTimeout(function(){
$('.sort-destination-loader.sort-destination-loader-showing').show();
},3000); //allow display after 3 seconds
如果可行，则后退 ,3000 直到延迟尽可能短:
},500); //allow display after 1/2 second
也许这会在您努力理解完整问题时暂时解决问题？
关于php - HTML 中特定部分的加载器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56329304/