jQuery 한 자리에서 HTML 코드를 추출하여 다른 곳에 배치하기

Question

나는 모든 배너에서 모든 DOM 렌더링 된 img 태그를 취할 수있는 배너 슬라이더를 조작하려고합니다. 을 통해 몇 초 단위로 한 번에 시간 제한을 설정하십시오. 이미지의 크기/크기 때문에 페이지로드가 줄어들지 않도록하려는 것입니다.

내 문제는 내가 img 태그의 첫 번째 인스턴스를 무시하고 다른 사람을 제거하는 경우 문을 얻이 수없는 것이다. 그것의 전체 또는 아무도, 그래서 나는 img [0] 맞지 않을 수도 있습니다 생각합니다. 나는 또한 CSS를 '첫째 아이도 행운과 좁은 방()을 시도하고있다 & n 번째 자녀 (1). 또한 img 태그 html로 새 배열을 만든 다음 계속 시도했지만 ... No Good 중 하나임을 증명했습니다.

어떻게하면이 아이디어를 얻을 수 있습니까? 그리고 너희들이 더 나은 접근법을 가지고 있다면, 나는 제안에 개방적이다.

감사합니다. 당신이 게으른 로딩에 대해 얘기하고 같이

는

var img = $('div > img'); 
 
$.each(img, function(i) { 
 
    if (!img[0]) { 
 
    img.remove(); 
 
    setTimeout(function(){ 
 
     $('.main').append(img); 
 
    }, i * 2000); 
 
    } 
 

 
});

.main { 
 
    width: 200px; 
 
    height: 80px; 
 
    padding: 10px; 
 
    overflow: visible; 
 
    border: 2px solid red; 
 
} 
 
.div1, 
 
.div2, 
 
.div3 { 
 
    width: 200px; 
 
    height: 80px; 
 
    background: #ccc; 
 
    float: left; 
 
    position: absolute; 
 
} 
 
.div2 {left:232px;} 
 
.div3 {left:437px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
     
 
    <div class='div1'> 
 
     <img src="#" alt=""> 
 
    </div> 
 
    <div class='div2'> 
 
     <img src="#" alt=""> 
 
    </div> 
 
    <div class='div3'> 
 
     <img src="#" alt=""> 
 
    </div> 
 

 
</div>

Answer 1

보인다. lazysizes을 보시면 데모 링크가 있습니다.