jQuery从一个位置提取html代码并将其放置在另一个位置

Question

I'm trying to manipulate a banner slider where it would take all the DOM rendered img tags from all the banners – except the first – and then load them back in one at a time in increments of a few seconds via a set Timeout . I'm just trying to not bog down the page load because of the amount/size of the images.

My issue is that I cannot seem to get the if statement to bypass the first instance of the img tag and remove the others. Its all or none, so I think the img[0] may not be correct. I have also tried .first() with no luck, and also css' first-child & nth-child(1) . I also tried creating a new array with the img tag html and then continue on...but that proved No Good either.

Any ideas how I can get this going? And if y'all have a better approach, I'm open for suggestions.

Thank you.

 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

It seems like you're talking about lazy loading. Have a look at lazysizes , they've got a demo link.