Проблемы с анимацией
Здравствуйте.
Пациент: https://kulibinstudio.com/all_collections/ Проблема: Чтобы хоть как то разгрузить страницу по весу, решил вставлять в определенные id картинки и видео при первом наведении на главный блок . И все получилось, вес упал в 3 раза, все работает. Но при наведении на главное фото почему то тормозит немного. Это очень странно, так как при наведении на превью в области просмотра фото все сменяется молниеносно, причем красиво с анимацией. А при наведении на главную картинку - тормозит. Вот видео для лучшего понимания: https://nimb.ws/ozX0kC |
У вас тонны повторяющегося js и css кода на странице, а вы картинки оптимизируете.
|
Цитата:
и кстати он не повторяющийся, а просто используется для каждого блока отдельно |
если можно как то оптимизировать это, то буду благодарен):
{% for product in products %} <!-- Карточка товара -->
<div class="product-layout product-grid grid-style col-lg-4 col-md-4 col-sm-4 col-xs-6 product-items" id="box_pro_{{ product.product_id }}c">
<script>
let msd_box{{ product.product_id }} = 1;
$('#box_pro_{{ product.product_id }}c').mouseover(function() {
if (msd_box{{ product.product_id }} == 1) {
{% if product.video %}$('#msd_box{{ product.product_id }}_2').html('<video id="mvideo{{ product.product_id }}" width="100%" preload="none" autoplay loop muted><source src="{{ product.video }}" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2""></video>');{% endif %}
$('#msd_box{{ product.product_id }}_3').html('<img src="{{ product.thumb2 }}" alt="{{ product.name }}" class="ani5">');
$('#msd_box{{ product.product_id }}_4').html('<img src="{{ product.thumb3 }}" alt="{{ product.name }}" class="ani5">');
$('#msd_box{{ product.product_id }}_5').html('<img src="{{ product.thumb4 }}" alt="{{ product.name }}" class="ani5">');
$('#msd_box{{ product.product_id }}_6').html('<img src="{{ product.thumb5 }}" alt="{{ product.name }}" class="ani5">');
{% if not product.video %}{% if product.thumb6 %}$('#msd_box{{ product.product_id }}_7').html('<img src="{{ product.thumb6 }}" alt="{{ product.name }}" class="ani5">');{% endif %}{% endif %}
msd_box{{ product.product_id }} = 0
}
});
$('#box_pro_{{ product.product_id }}c').mouseleave(function() {
timer{{ product.product_id }} = window.setTimeout(function() {
$('#msd_box{{ product.product_id }}_1').addClass('active');
$('#msd_box{{ product.product_id }}_1').addClass('no_scale');
$('#msd_data{{ product.product_id }} span').removeClass('active');
},4000);
});
$('#box_pro_{{ product.product_id }}c').mouseenter(function() {
clearTimeout(timer{{ product.product_id }});
});
</script>
<div class="product-thumb pro_b2 scrollflow -slide-left -opacity {% if product.quantity == 0 %}sold_out{% endif %} kep11">
<div class="product-item">
<div class="image"> <!-- Блок просмотра выбранного медиа -->
{% if product.quantity == 0 %}
<img src="/image/catalog/site_img/sold_out.png" class="sold_out_img ani2">
{% endif %}
<a href="{{ product.href }}" id="gl_img_{{ product.product_id }}c">
<span id="msd_box{{ product.product_id }}_1" class="msd_box ani5 active no_scale">
<img src="{{ product.thumb }}" alt="{{ product.name }}" class="ani5">
</span>
<span id="msd_data{{ product.product_id }}">
{% if product.video %}
<span id="msd_box{{ product.product_id }}_2" class="msd_box ani5"></span>
{% endif %}
{% if product.thumb2 %}
<span id="msd_box{{ product.product_id }}_3" class="msd_box ani5"></span>
{% endif %}
{% if product.thumb3 %}
<span id="msd_box{{ product.product_id }}_4" class="msd_box ani5"></span>
{% endif %}
{% if product.thumb4 %}
<span id="msd_box{{ product.product_id }}_5" class="msd_box ani5"></span>
{% endif %}
{% if product.thumb5 %}
<span id="msd_box{{ product.product_id }}_6" class="msd_box ani5"></span>
{% endif %}
{% if not product.video %}
{% if product.thumb6 %}
<span id="msd_box{{ product.product_id }}_7" class="msd_box ani5"></span>
{% endif %}
{% endif %}
</span>
</a>
</div> <!-- // Блок просмотра выбранного медиа -->
<div class="ss25">
{% if product.thumb %}
<div>
<img src="{{ product.thumb0min }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}c" />
</div>
<script>
$('#top_img_{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('no_scale');
$('#msd_box{{ product.product_id }}_1').addClass('active');
});
</script>
{% endif %}
{% if product.video %}
<div class="relative" id="global_video_id{{ product.product_id }}c">
{% if product.poster1min %}
<img src="{{ product.poster1min }}" alt="{{ product.name }}" class="img-responsive" />
{% else %}
<img src="{{ product.thumb4min }}" alt="{{ product.name }}" class="img-responsive" />
{% endif %}
<div class="ad_video_icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</div>
<script>
$('#global_video_id{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('active');
$('#msd_box{{ product.product_id }}_2').addClass('active');
});
</script>
{% endif %}
{% if product.thumb2 %}
<div>
<img src="{{ product.thumb2min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}c" />
</div>
<script>
$('#ad_img1_{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('active');
$('#msd_box{{ product.product_id }}_3').addClass('active');
});
</script>
{% endif %}
{% if product.thumb3 %}
<div>
<img src="{{ product.thumb3min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img2_{{ product.product_id }}c" />
</div>
<script>
$('#ad_img2_{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('active');
$('#msd_box{{ product.product_id }}_4').addClass('active');
});
</script>
{% endif %}
{% if product.thumb4 %}
<div>
<img src="{{ product.thumb4min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img3_{{ product.product_id }}c" />
</div>
<script>
$('#ad_img3_{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('active');
$('#msd_box{{ product.product_id }}_5').addClass('active');
});
</script>
{% endif %}
{% if product.thumb5 %}
<div>
<img src="{{ product.thumb5min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img4_{{ product.product_id }}c" />
</div>
<script>
$('#ad_img4_{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('active');
$('#msd_box{{ product.product_id }}_6').addClass('active');
});
</script>
{% endif %}
{% if not product.video %}
{% if product.thumb6 %}
<div>
<img src="{{ product.thumb6min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img5_{{ product.product_id }}c" />
</div>
<script>
$('#ad_img5_{{ product.product_id }}c').mouseover(function() {
$('#msd_data{{ product.product_id }} span').removeClass('active');
$('#msd_box{{ product.product_id }}_1').removeClass('active');
$('#msd_box{{ product.product_id }}_7').addClass('active');
});
</script>
{% endif %}
{% endif %}
</div>
<div class="button-group f33c"> <!-- Кнопки -->
<div class="inner">
<button type="button" data-toggle="tooltip" data-placement="top" class="button-cart" onclick="cart.add('{{ product.product_id }}');" title="{{ button_cart }}"><span>{{ button_cart }}</span></button>
<button type="button" data-toggle="tooltip" data-placement="top" title="{{ button_wishlist }}" class="button-wishlist" onclick="wishlist.add('{{ product.product_id }}');"><span>{{ button_wishlist }}</span></button>
<button type="button" data-toggle="tooltip" data-placement="top" title="{{ button_compare }}" class="button-compare" onclick="compare.add('{{ product.product_id }}');"><span>{{ button_compare }}</span></button>
<button type="button" data-toggle="tooltip" data-placement="top" title="{{ text_viar }}" class="viar_cat" onclick="alert('{{ text_viar_tech }}')"></button>
<button type="button" data-toggle="tooltip" data-placement="top" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ product.href }}')"><span>{{ button_quickview }}</span></button>
</div>
</div> <!-- // Кнопки -->
</div>
</div>
</div> <!-- // Карточка товара -->
{% endfor %}
|
Цитата:
Цитата:
Скорее всего, вы писали о размере страницы + все подгружаемые медиа элементы. Только в этом случае "вес" страницы мог уменьшиться в 3 раза. Однако для подобного обычно используют ленивую загрузку (lazyload). |
Цитата:
нужно наверное каждому из них задавать свою позицию top:-370px. а при наведении менять ее на активную top:0 Цитата:
if (msd_box{{ product.product_id }} == 1) {
*код вставки медиа в нужный блок*
msd_box{{ product.product_id }} = 0
}
т.е. один раз выполняем, а далее просто игнорируем, так как код уже в блоках. Увидел что гугл поставил оценку 96 и с 14-15 мб опустил вес страницы на 4+Вот и обрадовался))) Костыльно, но работает. Жаль только что с анимацией нужно думать. Я ради интереса добавил в стиль неактивным блокам display:none а активному display:block, тогда и проблема ушла, никаких задержек абсолютно. Но и анимация при наведении пропала(( Поэтому буду пробовать расположить каждый из блоков в разных координатах. Или может есть предложение?) К слову, скрипты по одному поубирал из блоков и отправил вниз блока все вместе, а не постоянное открытие и закрытие <script> |
| Часовой пояс GMT +3, время: 22:06. |