懒惰加载不加载

我在我的项目中使用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 
    }); 
});

但是，这也不行，图像不是在所有加载。我该如何解决这个问题？

来源

2017-06-15 Leff

您的开发控制台内的任何错误也许？（ctrl + shift + j） – ymz

在控制台中没有错误 – Leff

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

来源

2017-06-15 13:02:30 ymz

我没有创建多个传送带，这不是问题，问题是延迟加载不起作用，foreach循环与它无关，因为我没有否则，如果我删除懒惰旋转木马类，创建旋转木马问题 – Leff

懒惰的开发在这里！

就我所见，您的项目中有两个问题。

首先，Lazy将默认侦听用户的scroll事件。该插件不能注意到滑块正在改变。你需要手动告诉你这个问题。我不知道你的滑块，但是当滑块改变时你需要调用function。
第二，你想延迟加载图像，但你告诉懒惰处理.lazy-carousel，什么是包装div，而不是里面的图像。

为了解决这个问题创造你懒的实例，并把它传递给一个变量，并告诉懒得处理图像：

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

每当你的滑块改变，你需要调用公共职能懒惰的.update()，处理现在可见的图像：

window.lazy.update();

这应该按预期那样工作。

来源

2017-07-21 07:02:02 eisbehr

懒惰加载不加载

回答

相关问题