Swiper 滑块 - 用于加载图像的模糊技术

Question

我正在使用iDangerous swiper 作为我页面上的滑块。 但是，由于图像加载非常缓慢，所以在加载图像之前，滑块看起来像这样，其中只显示一条细线，这是我假设图像的边框，如图所示。

我认为imagecache 或intervention image 会导致图像加载速度变慢。这是滑块的代码，我在其中实现默认的swiper slider lazy loading：

 @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

但是，一开始并没有显示微调器，它只是一条线，因为我假设我没有设置卡片图像的高度，这是 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;
    }
  }
}

但是，如果我设置了高度，那么我就会失去滑块的响应性。我想做的是实现在许多站点上使用的模糊技术，其中小图像在加载大图像之前被调整大小和模糊。但我不确定如何使用滑动滑块来实现这一点。有什么解决办法吗？

Answer 1

这些应该会加快您的页面加载速度：

1. 将滑块图像的大小减小到所需的确切图像大小。
2. 使用 cdn 预加载缓存，这样就不必每次都加载相同的图像。 WP Super Cache 也是一个很好的解决方案。
3. 尝试禁用插件，看看是否有任何冲突。

您能否提供滑块所在的网址供我查看？

或者这些可能会有所帮助！ CSS 制作 alpha 层：

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;
}

告诉我进展如何。