Question

我在我的项目中使用lazy loading plugin。我有一个带有图像的旋转木马。我需要在旋转木马中延迟加载图像。这是html：

@foreach($issues as $issue)
      <div class="swiper-slide magazine-image lazy-carousel">
        <div
          class="slider-image-wrap js-magazine-selector"
          data-id='{{ $issue->first()->magazine->id }}'
          data-slug='{{ str_slug($issue->first()->magazine->name) }}'
          data-name='{{ $issue->first()->magazine->name }}'
          data-summary='{{ $issue->first()->magazine->summary ?: '' }}'
          data-magazine-image='{{ $issue->first()->image  }}'
          data-magazine-visiolink='{{ $issue->first()->magazine->visio_link_prefix }}'
          data-issue-image='{{ $issue->first()->magazine->image ?: '' }}'
        >
          <img data-src="/imagecache/medium/{{ $issue->first()->image  }}">
          <div class="magazine-overlay">
            <div>
              <p>{{ $issue->first()->magazine->name }}</p>
              <a href="#">Se magasinet </a>
            </div>
          </div>
        </div>
      </div>
@endforeach

这是剧本：

$(document).ready(function () {
  $('.lazy-carousel').Lazy({
    scrollDirection: 'horizontal',
    effect: 'fadeIn',
    effectTime: 2000,
    threshold: 0
  });
});

但是，这不起作用，图像根本没有加载。我该如何解决这个问题？

Answer 1

在这里懒惰开发！

据我所知，你的项目有两个问题。

首先，Lazy默认会监听用户的scroll个事件。该插件无法注意到滑块正在改变。你需要手动告诉你这个问题。我不知道您的滑块，但是当滑块更改时，您需要调用function。
其次，您希望延迟加载图像，但是您告诉Lazy处理.lazy-carousel，包装器div是什么，而不是里面的图像。
< / LI>

要解决此问题，请创建您的Lazy实例并将其传递给变量并告诉Lazy处理图像：

$(document).ready(function () {
  var lazy = $('.lazy-carousel img').Lazy({
    scrollDirection: 'horizontal',
    effect: 'fadeIn',
    effectTime: 2000,
    threshold: 0,
    chainable: false
  });
});

每当滑块更改时，您需要调用Lazy的公共函数.update()来处理现在可见的图像：

window.lazy.update();

这应该按预期工作。

Answer 2

您可以使用单个图像（每个）创建多个轮播，而不是使用多个图像创建一个轮播。试试这个：

      <div class="swiper-slide magazine-image lazy-carousel">
        <div
          class="slider-image-wrap js-magazine-selector"
          data-id='{{ $issue->first()->magazine->id }}'
          data-slug='{{ str_slug($issue->first()->magazine->name) }}'
          data-name='{{ $issue->first()->magazine->name }}'
          data-summary='{{ $issue->first()->magazine->summary ?: '' }}'
          data-magazine-image='{{ $issue->first()->image  }}'
          data-magazine-visiolink='{{ $issue->first()->magazine->visio_link_prefix }}'
          data-issue-image='{{ $issue->first()->magazine->image ?: '' }}'
        >
        @foreach($issues as $issue)
          <img data-src="/imagecache/medium/{{ $issue->first()->image  }}">
          <div class="magazine-overlay">
            <div>
              <p>{{ $issue->first()->magazine->name }}</p>
              <a href="#">Se magasinet </a>
            </div>
          </div>
          @endforeach
        </div>
      </div>

懒加载没有加载

2 个答案: