웹 사이트의 데이터 지연 기능

-1

저는 지금 당분간이 문제에 시달리고 있습니다.웹 사이트의 데이터 지연 기능

기본적으로 웹 사이트가있어서 일부 이미지가 표시되며 하나씩 애니메이션을 적용 해 보겠습니다. 인터넷에있는 animate.css을 추가했으며 내 웹 사이트에 추가했습니다.

<!-- START Column 1 --> 
     <div class="one-third column"> 
      <div class="img-wrp animated rotateIn" data-delay="100"> 
       <a href="#"> <img alt="" class="scaleimg" src="images/photo.jpg" /> </a> 
       <div class="overlay-wrp"> 
        <div class="overlay"> </div> 
       </div> 
      </div> 
      <h3> Title 1</h3> 
      <p class="job position">Podnaslov </p> 
      <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non leo nec enim ultricies convallis. Quisque tempus, lorem in rutrum vulputate, elit justo placerat neque, sed iaculis diam nisl vel sapien. Donec facilisis in lectus non adipiscing. Sed molestie scelerisque. </p> 
     </div> 
     <!--END Column 1 --> 


     <!-- START Column 2 --> 
     <div class="one-third column"> 
      <div class="img-wrp animated rotateIn" data-delay="500"> 
       <a href="#"> <img alt="" class="scaleimg" src="images/photo.jpg" /> </a> 
       <div class="overlay-wrp"> 
        <div class="overlay"> </div> 
       </div> 
      </div> 
      <h3> Title 2</h3> 
      <p class="job position">Podnaslov </p> 
      <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non leo nec enim ultricies convallis. Quisque tempus, lorem in rutrum vulputate, elit justo placerat neque, sed iaculis diam nisl vel sapien. Donec facilisis in lectus non adipiscing. Sed molestie scelerisque. </p> 
     </div> 
     <!--END Column 2 -->

내가 달성하고자하는 것은 예를 들어 첫 번째 표시, 하나 하나의 이미지를 애니메이션으로 하나 초 2 초 등 후 두 번째 이후 :

이 내 HTML입니다. 나는 .js에 너무 좋지 않기 때문에 누군가가 나를 도와 줄 수 있다면.

그리고 이미지를 아래로 스크롤하면 어떻게 만들 수 있습니까? 누군가가 웹 페이지의 해당 부분으로 스크롤하기 전에 어떻게 만들 수 있습니까?

고맙습니다. 건배!

출처

2014-06-10 user3727784

이와 비슷한 제품을 찾고 계십니까? http://www.appelsiini.net/projects/lazyload 게으른로드 (lazy load)라고 불리우며 아래로 스크롤 할 때 한 번에 하나의 사진을로드하는 기능을 제공합니다 ... 아주 간단합니다. – BuddhistBeast

고마워 BuddhistBeast, 이것이 내가 찾고 있었던 하나이다. :) – user3727784

하지만 여전히 이미지가 스크롤없이 지연으로 표시되는 것이 필요합니다.이 플러그인에서도 가능합니까? – user3727784

나는 당신이 원했던 것을 보여주는 좋은 예를 보여주는 바이올린 온라인을 발견했습니다. 나는 그것을 업데이트하고 아래에서 찾을 수있는 몇 가지를 변경했습니다. 솔직히, 당신이 필요하지 않은 ...

$(function() { 
     $("img").lazyload({ 
      effect : "fadeIn", 
      effectspeed: 10000 
     }); 
    });

이 사진을 볼 수 있습니다 사용자의 10 초 지연을 설정 않습니다 모든 :

이 모든의 핵심은 다음과 같은 코드 오래있을지라도 항상 함께 놀 수 있습니다. 또한 위의 주석에서 언급 한 lazy load plugin을 사용하기 위해 지시 사항을 완전히 따라야합니다.

사이드 참고 :

당신은 몇 가지 유용한 힌트 here 또는 here (단지 구글 게으른로드)를 찾을 수 있습니다.

JSFIDDLE

출처

2014-06-10 22:14:00 BuddhistBeast

웹 사이트의 데이터 지연 기능

답변

관련 문제