懶惰加載不加載

我在我的項目中使用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

懶惰加載不加載

回答

相關問題