Проблемы с анимацией

[StartGames]

Здравствуйте.

Пациент: https://kulibinstudio.com/all_collections/

Проблема:
Чтобы хоть как то разгрузить страницу по весу, решил вставлять в определенные id картинки и видео при первом наведении на главный блок . И все получилось, вес упал в 3 раза, все работает. Но при наведении на главное фото почему то тормозит немного. Это очень странно, так как при наведении на превью в области просмотра фото все сменяется молниеносно, причем красиво с анимацией. А при наведении на главную картинку - тормозит.

Вот видео для лучшего понимания: https://nimb.ws/ozX0kC

[Nexus]

У вас тонны повторяющегося js и css кода на странице, а вы картинки оптимизируете.

[StartGames]

У вас тонны повторяющегося js и css кода на странице, а вы картинки оптимизируете.

к сожалению по другому никак(( Но неужели он так влияет? ведь именно когда он работает - проблем нет. гугл тоже оценку в 94 поставил. а вот в чем загвоздка не понимаю.

и кстати он не повторяющийся, а просто используется для каждого блока отдельно

[StartGames]

если можно как то оптимизировать это, то буду благодарен):

{% 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=&quot;avc1.42E01E, mp4a.40.2&quot;"></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 %}

[Nexus]

к сожалению по другому никак(( Но неужели он так влияет?

Фризы вряд ли из-за него (скорее всего, это из-за анимации), а вот на вес страницы этот код влияет. Вы же изначально вес страницы оптимизировали.

Чтобы хоть как то разгрузить страницу по весу, решил вставлять в определенные id картинки и видео при первом наведении на главный блок . И все получилось, вес упал в 3 раза, все работает.

Btw, названные вами манипуляции никак не уменьшают вес страницы, наоборот увеличивают его (из-за повторений кода).
Скорее всего, вы писали о размере страницы + все подгружаемые медиа элементы. Только в этом случае "вес" страницы мог уменьшиться в 3 раза. Однако для подобного обычно используют ленивую загрузку (lazyload).

[StartGames]

Фризы вряд ли из-за него (скорее всего, это из-за анимации), а вот на вес страницы этот код влияет. Вы же изначально вес страницы оптимизировали.

да, вы правы. дело в том что все блоки с фото и видео находятся в абсолюте в одном месте, накладываются друг надруга несмотря на то что прозрачность 0. https://prnt.sc/115hi28

нужно наверное каждому из них задавать свою позицию top:-370px. а при наведении менять ее на активную top:0

Btw, названные вами манипуляции никак не уменьшают вес страницы, наоборот увеличивают его (из-за повторений кода). Скорее всего, вы писали о размере страницы + все подгружаемые медиа элементы. Только в этом случае "вес" страницы мог уменьшиться в 3 раза. Однако для подобного обычно используют ленивую загрузку (lazyload).

да, я хотел (так как медиа много) подгружать основные медиа по наведению на карту, а от повторного срабатывания защитился вот такой примитивной приблудой:

if (msd_box{{ product.product_id }} == 1) {
   *код вставки медиа в нужный блок*
   msd_box{{ product.product_id }} = 0
}

т.е. один раз выполняем, а далее просто игнорируем, так как код уже в блоках.

Увидел что гугл поставил оценку 96 и с 14-15 мб опустил вес страницы на 4+Вот и обрадовался))) Костыльно, но работает.

Жаль только что с анимацией нужно думать. Я ради интереса добавил в стиль неактивным блокам display:none а активному display:block, тогда и проблема ушла, никаких задержек абсолютно. Но и анимация при наведении пропала(( Поэтому буду пробовать расположить каждый из блоков в разных координатах. Или может есть предложение?) К слову, скрипты по одному поубирал из блоков и отправил вниз блока все вместе, а не постоянное открытие и закрытие <script>