jQuery를 게으른 수평 데이터 SRC로드 페이드 또는 로딩 이미지

jQuery를 게으른 수평 데이터 SRC로드 페이드 애니메이션을하거나 질문에 대한 로딩 이미지가jQuery를 게으른 수평 데이터 SRC로드 페이드 또는 로딩 이미지

$('.lazy').Lazy({ 
    // your configuration goes here 
    scrollDirection: 'horizontal', 
    effect: 'fadeIn', 
    visibleOnly: true, 
    onError: function(element) { 
    console.log('error loading ' + element.data('data-src')); 
    } 
});

예를 https://jsfiddle.net/ypcao1xx/

<div class="card-hor-image card-image lazy" data-src="https://www.gstatic.com/webp/gallery3/2.png">

출처

2016-12-18 ladysilvia

덕분에 일을 해달라고 애니메이션 이리. 귀하의 효과가 예상대로 작동하지 않는 이유를 설명해주십시오.

당신은 horizontal로 스크롤 방향을 설정했다. 하지만 실제로 당신의 예는 vertical입니다. 따라서 플러그인은 잘못된 치수를 검사합니다. 값을 vertial으로 설정하거나 config 매개 변수를 제거하여 모든 치수를 확인하십시오.
effect을 fadeIn으로 설정했지만 effectTime을 설정하는 것을 잊었습니다. 따라서 기본 시간은 0 일 것입니다. 기본적으로 볼 수있는 효과는 없습니다. 그러니 프로퍼러 시간을주십시오.
기본적으로 Lazy는 window 개체의 스크롤 이벤트를 수신 대기합니다. 그러나 클래스 .wrapper-scroll에 의해 정의 된 스크롤 컨테이너를 사용하고 있습니다. 이것을 appendScroll 매개 변수와 함께 스크립트에 알려야합니다.

효과를 얻으려면 threshold을 0으로 설정해야합니다. 그렇지 않으면 효과가 시작되어 사용자가 요소를 볼 수 있기 때문입니다. 그것도없이 작동하지만 그렇지 않으면 visibile 수 없습니다.

$('.lazy').Lazy({ 
 
    appendScroll: $('.wrapper-scroll'), 
 
    effect: 'fadeIn', 
 
    effectTime: 3000, 
 
    threshold: 0 
 
});

*, *::before, *::after { 
 
    box-sizing: inherit; 
 
} 
 

 
.lazy { 
 
    height: 400px; 
 
} 
 

 
.wrapper-scroll { 
 
    overflow-x: scroll; 
 
    position: relative; 
 
    display: -webkit-box; 
 
} 
 

 
.content-scroll { 
 
    width: -webkit-max-content; 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    flex-basis: auto; 
 
} 
 

 
.card-3d figure { 
 
    cursor: pointer; 
 
} 
 

 
.card-3d .front { 
 
    z-index: 1; 
 
} 
 

 
.list-carousel-item-sx { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
.list-carousel-item-sx .card-hor { 
 
    background-attachment: scroll; 
 
    background-repeat-x: no-repeat; 
 
    background-repeat-y: no-repeat; 
 
    background-position-x: 50%; 
 
    background-position-y: 50%; 
 
} 
 

 
.list-carousel-item-sx .card-hor-image { 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50%; 
 
    background-color: rgba(125, 125, 125, 0.9); 
 
} 
 

 
.card-hor-image { 
 
    background-size: cover; 
 
    height: 300px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script> 
 

 
<div class="wrapper-scroll"> 
 
    <div class="content-scroll"> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

밍이 일을 유지, 우리는 이제 작동 예를

출처

2017-01-12 09:12:12 eisbehr

jQuery를 게으른 수평 데이터 SRC로드 페이드 또는 로딩 이미지

답변

관련 문제