Загрузчик для определенного раздела в HTML
Я новичок в разработке веб-сайтов, поэтому меня немного смущает поведение веб-страницы. Я хочу использовать загрузчик, чтобы скрыть загрузку изображения в HTML. На индексной странице я использовал вкладки, чтобы показать категорию продукта, и в каждой категории отображаются изображения. Таким образом, загрузка изображений занимает время, и сначала отображаются все изображения продуктов всех категорий, что неприемлемо. Вы можете проверить сайт http://www.accessdig.com/index.html. Я говорю о разделе, который находится после слайдера.
<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>
Здравствуйте. внимательно проверьте видео и полностью загруженную страницу. Это видео прислал мой клиент. В видео вы можете увидеть товары всех 7 категорий, но на самом деле на полностью загруженной странице видны только Индивидуальные дисплеи торговых точек. Понял?
Вероятно, вы уже проверили, но ваш клиент очищал кеш перед проверкой страницы? Возможно, он видит старый код...? Как очистить кэш в Google Chrome -- обязательно просмотрите эту ссылку.
Он проверил это в первый раз
Итак, для ясности: действительно ли ваш клиент очистил кеш, и это имело какое-либо значение? Результат все тот же? Он все еще видит плохие результаты?
Сэр, это не проблема кэш-памяти, это происходит из-за медленного соединения, и я могу сказать это одному своему клиенту, но клиент не может сказать это каждому посетителю сайта.
Сайт «подстраивается» и скрывает лишние изображения через несколько секунд? Или дополнительные изображения продукта остаются видимыми?
Ответы 2
при просмотре вашего веб-сайта с моего компьютера мне кажется, что у вас все в порядке в соответствии с вашей проблемой. Это может случиться из-за моего быстрого интернета. Время загрузки вашего веб-сайта не может занимать дополнительное время на моем компьютере. Кстати, я могу предложить вам обернуть тег body body под div. После этого добавьте уникальный идентификатор в свой оберточный div. После этого просто примените некоторый код jquery к идентификатору, когда все документы загрузятся правильно. Дайте мне знать, но вы не можете закончить выпуск.
Здравствуйте, сэр. Вы правильно поняли мой вопрос. Спасибо. Но я хочу знать, как это сделать, поскольку я новичок в этой области. Вы также можете проверить видео, которое я загрузил. Веб-сайт отлично работает и на моем компьютере, но вы не можете указать ту же причину клиенту. Так что мне нужно найти решение этой проблемы
Мое первое предположение состоит в том, что, возможно, ваш клиент не очистил свой кеш и поэтому запускает старый код. Он может очистить кеш, следуя эти инструкции.
Если описанное выше не устранило проблему:
Это кладж, потому что я не знаю вашего полного кода HTML/javascript, но:
Возможно, вы можете скрыть раздел с изображениями категорий на секунду или две, а затем разрешить его отображение, когда это необходимо:
.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
Если это сработает, то отодвиньте ,3000 до минимально возможной задержки:
},500); //allow display after 1/2 second
Возможно, это временно решит проблему, пока вы работаете над ее полным пониманием?
я не пробовал это, потому что клиент хочет постоянного решения. Спасибо за решение
Вы лично проверяли это на клиентской машине? Спрашиваю, потому что иногда клиент скажет "Да, я очистил кеш, как вы просили", хотя на самом деле он сделал это неправильно. Вы определенный что проблема не в кеше? Просто спрашиваю... Всегда можно сказать клиенту, что вы не можете воспроизвести ошибку на своей машине и спросить, можете ли вы сделать удаленный тест (через Присоединяйся ко мне, или любой из этих, или Вот эти)
Проверьте видео, которое я загрузил. Тогда у вас появится идея. Проблема в том, что он отлично работает и на моем компьютере, но вы не можете указать ту же причину клиенту. Так что мне нужно найти решение этой проблемы