HTML中特定部分的加载程序

时间：2019-05-27 16:03:05

标签： php html css

我是网站开发的新手，因此与网页的行为混淆。 我想使用加载器隐藏HTML中加载的图像。在索引页面中，我使用了选项卡视图来显示产品类别，并且在每个类别中都显示图像。因此，加载图像会花费一些时间，首先，它会显示所有类别的所有产品图像，这是不可接受的。您可以检查网站http://www.accessdig.com/index.html。我说的是滑块之后的部分。

enter image description here

                

            <div class="row pt-4 appear-animation" data-appear-animation="fadeInUpShorter">
                    <div class="container py-2">

                <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>

2 个答案:

答案 0 :(得分：0)

从我的计算机浏览您的网站时，在我看来，根据您的问题，一切正常。我的快速互联网可能会发生这种情况。您网站的加载时间不会在我的计算机上花费额外的时间。顺便说一句，我建议您将div标签包裹在div下面。之后，在您的环绕div中添加唯一的ID。然后，在正确加载所有文档后，仅对id应用一些jquery代码。让我知道，但您无法解决问题。

答案 1 :(得分：0)

我的第一个猜测是，您的客户端可能尚未清除其缓存，因此正在运行旧代码。他可以按照these instructions清除缓存。

如果上述方法不能解决问题，则

这很麻烦，因为我不知道您的完整HTML / javascript代码，但是：

也许您可以将带有类别图像的部分隐藏一两秒钟，然后在适当的时候允许其显示：

public class YourCustomTokenRequestValidator: ICustomTokenRequestValidator
{
  public Task ValidateAsync(CustomTokenRequestValidationContext context)
  {
    context.Result.CustomResponse = 
      new Dictionary<string, object>{{"claim_1", "XXXXXX"}, {"claim_2", "SSSSSS"}};
    return Task.CompletedTask;
  }
}

和在javascript中

services.AddIdentityServer()
   .AddCustomTokenRequestValidator<YourCustomTokenRequestValidator>();

如果可行，则后退 .sort-destination-loader.sort-destination-loader-showing{display:none;} ，直到尽可能短的延迟：

setTimeout(function(){
    $('.sort-destination-loader.sort-destination-loader-showing').show();
},3000); //allow display after 3 seconds

也许这会在您理解整个问题时暂时解决问题？

相关问题
最新问题