스 와이퍼 슬라이더 - 이미지를 로딩하기위한 기술을 흐리게 처리합니다.

Question

내 페이지에있는 슬라이더에 swiper slider을 사용하고 있습니다. 그러나 이미지가 매우 느리게로드되기 때문에 이미지가로드되기 전에 슬라이더가 보입니다. 여기에는 이미지에 테두리가 표시되는 것처럼 얇은 선만 표시됩니다.

나는 intervention image의 imagecache 이미지 로딩 속도가 느린 시간에 기여하고 있다고 가정합니다. 내가 설정 한 높이가없는 가정하기 때문에, 그것은 오직 라인

@foreach($players as $player) 
     <div class="swiper-slide"> 
     <a href="/player/{{ $player->id }}/{{ $player->fullName }}"> 
      <div class="card bg-dark text-white"> 
      <img data-src="/imagecache/medium/{{ $player->image_filename }}" class="card-img swiper-lazy"/> 
      <div class="swiper-lazy-preloader"></div> 
      <div class="card-img-overlay"> 
       <div class="card-content"> 
       <h5 class="card-title">{{ $player->first_name }} {{ $player->last_name }}</h5> 
       <p class="card-text"> 
        {{ $player->nationality }} 
        @if($player->position != '') 
        | {{ $player->position }} 
        @endif 
       </p> 
       </div> 
      </div> 
      </div> 
     </a> 
     </div> 
    @endforeach 

그러나, 스피너는 처음에는 표시되지 않습니다 : 이것은 내가 기본 swiper slider lazy loading을 구현하고 슬라이더, 코드입니다 카드 이미지의 경우 이것은 scss입니다 :

.card { 
    border: 1px solid $gray-border; 
} 
.card-img { 
    width: 100%; 
} 
.card-title { 
    margin: 0; 
    line-height: 1; 
    color: $white; 
} 
.card-text { 
    font-size: 0.9rem; 
    display: inline-block; 
    font-weight: 500; 
} 
.card-image-wrapper { 
    position: relative; 
    img { 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    } 
} 
.card-content { 
    width: 100%; 
    padding: 0.75rem; 
    padding-top: 1.5rem; 
    border-radius: 0.25rem; 
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35), rgba(60, 60, 60, 0.65)); 
} 
.card-img-overlay { 
    display: flex; 
    padding: 0; 
    align-items: flex-end; 
    .play-icon-wrapper { 
    position: absolute; 
    left: calc(50% - 1rem); 
    top: calc(50% - 1rem); 
    width: 2rem; 
    height: 2rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    img { 
     width: 40px; 
    } 
    } 
} 
.card-footer { 
    padding: 0.75rem; 
    background-color: $white; 
    a { 
    color: $black; 
    font-size: 0.9rem; 
    font-weight: 500; 
    } 
} 
.video-player-avatar { 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    margin-right: 2px; 
} 
@media (max-width: 767px) { 
    .play-icon-wrapper { 
    top: 45%!important; 
    width: 1.2rem; 
    height: 1.2rem; 
    left: calc(50% - 0.6rem); 
    img { 
     width: 30px; 
    } 
    } 
} 

그러나 높이를 설정하면 슬라이더의 반응을 잃게됩니다. 내가 뭘하고 싶은건 큰 이미지가로드되기 전에 작은 이미지의 크기와 흐려진 많은 사이트에서 사용되는 흐림 기법을 구현하는 것입니다. 그러나 나는 이것을 swiper slider로 구현하는 방법을 잘 모른다. 거기에 대한 해결책이 있습니까?

Answer 1

이 당신의 페이지 속도를해야 조금로드 :

1. 이 요구되는 정확한 이미지 크기에 슬라이더 이미지의 크기를 줄일 수 있습니다.
2. cdn을 사용하여 캐시를 미리로드하므로 매번 동일한 이미지를로드 할 필요가 없습니다. WP 수퍼 캐시도 항상 좋은 해결책입니다.
3. 충돌하는 플러그인이 있는지 보려면 플러그인을 사용 중지 해보세요.

내가보기에 슬라이더가있는 웹 주소를 제공 할 수 있습니까?

아니면 도움이 될 수도 있습니다. CSS는 알파 층 만들려면 :

HTML

<div class="background-1"> 
<div class="layer"> 
</div> 
</div> 
<div class="background-3"> 
<div class="layer"> 
</div> 
</div> 

CSS

.background-1 { 
    background:url('...image1.png'); 
    position: relative; 
} 

/* Lets leave the middle background alone */ 

.background-3 { 
    background:url('...image3.png'); 
    position: relative; 

.layer { 
    background-color: rgba(248, 247, 216, 0.7); /*Red Green Blue Alpha */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

를 또는과 같이 이미지에 흐림을 추가

HTML

<div class="BlurMeBaby"></div> 

CSS

.BlurMeBaby { 
    height:100%; 
    width:100%; 
    background:url('...ImageToBlur.png') no-repeat center; 
    background-size:cover; 
    -webkit-filter: blur(13px); 
    -moz-filter: blur(13px); 
    -o-filter: blur(13px); 
    -ms-filter: blur(13px); 
    filter: blur(13px); 
    position: absolute; 
    left:0; 
    top: 0; 
} 

나를 어떻게되는지 알려주세요.