Question

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

我认为intervention image的imagecache导致图像加载的缓慢时间。这是滑块的代码，我在其中实现了默认的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;
    }
  }
}

但是，如果我设置了高度，那么我就失去了滑块的响应能力。我想要做的是实现在许多网站上使用的模糊技术，在加载较大图像之前，小图像的大小和模糊。但我不知道如何使用swiper滑块实现这一点。那有什么解决方案吗？

Answer 1

这些可以加快你的页面加载：

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

您可以提供滑块供我查看的网址吗？

或许这些可能会有所帮助！用于制作alpha图层的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;
}

让我知道它是怎么回事。

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

1 个答案: