Я новичок в разработке веб-сайтов, поэтому путаю его с поведением веб-страницы. Я хочу использовать загрузчик, чтобы скрыть загрузку изображения в 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
Amanpreet Kaur 27 Май 2019 в 19:03

2 ответа

Лучший ответ

Мое первое предположение состоит в том, что, возможно, ваш клиент не очистил свой кэш, и поэтому выполняет старый код. Он может очистить кэш, следуя этим инструкциям.


Если вышеупомянутое не решило проблему:

Это клочок, потому что я не знаю вашего полного кода 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

Возможно, это временно решит проблему, пока вы работаете над ее полным пониманием?

1
cssyphus 27 Май 2019 в 19:08

При просмотре вашего сайта с моего компьютера, мне кажется, у вас все в порядке в соответствии с вашей проблемой. Это может произойти для моего быстрого интернета. Время загрузки вашего сайта не может занять дополнительное время на моем компьютере. Кстати, я могу предложить вам обернуть отверстие тела тега под div. После этого добавьте уникальный идентификатор с вашим div обтекания. После этого просто примените некоторый код jquery к id, когда все документы будут загружены правильно. Дайте мне знать, но вы не можете закончить проблему.

0
Md Abu Nawim 27 Май 2019 в 16:46