fetchpriority="high"

3 replies·opened Sep 15, 2023
K
kateboothbySep 15, 2023

Hi, trying to use fetchpriority="high" for the slider on the top of my page. Current code is

<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-100 include-header" data-autoplay="7000" data-speed="650" data-loop="true">
  <div class="slider-inner">
    <div class="swiper-container swiper-parent">
      <div class="swiper-wrapper">
        <div class="swiper-slide dark">
          <div class="swiper-slide-bg" style="background-image: url('pics/intimate-wedding-venue3.jpg');"></div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-bg" style="background-image: url('pics/intimate-wedding-venue2.jpg'); background-position: center top;"></div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-bg" style="background-image: url('pics/intimate-wedding-venue1.jpg'); background-position: center top;"></div>
        </div>
        <div class="swiper-slide">
          <div class="swiper-slide-bg" style="background-image: url('pics/an-intimate-wedding-venue.jpg');"></div>
        </div>
      </div>
      <div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
      <div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
      <div class="slide-number">
        <div class="slide-number-current"></div>
        <span>/</span>
        <div class="slide-number-total"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</section>

Where is the best place to use this for the images?

S
SemiColonWebSTAFFSep 15, 2023

Hello,

You can consider using something like this:

<div class="swiper-slide-bg">
	<img src="images/slider/swiper/1.jpg" alt="Slide BG" class="d-block w-100 h-100 object-cover" fetchpriority="high">
</div>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

K
kateboothbySep 15, 2023

Hi, Thank you. I can see examples in img tags of how to us this but my specific slider doesn't have img tags so i was wondering where would be best to use?

S
SemiColonWebSTAFFSep 15, 2023

Hello,

Since the fetchpriority can be used only on the <img> Tag, we have provided you with an example on how to implement this. This code is for the First Slide. You can simply replace this and then will need to manually apply this code manually to the other slides as required and change the Images accordingly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard