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

Question

我正在尝试操作一个横幅滑块，它会从所有横幅中获取所有 DOM 渲染的 img 标签（第一个除外），然后通过 设置超时。我只是想不因为图像的数量/大小而导致页面加载停滞。

我的问题是我似乎无法让 if 语句绕过 img 标签的第一个实例并删除其他实例。全部或全部，所以我认为 img[0] 可能不正确。我也试过 .first() 没有运气，还有 css' first-child & >nth-child(1)。我还尝试使用 img 标记 html 创建一个新数组，然后继续……但这也证明 不好。

任何想法我可以如何做到这一点？如果你们有更好的方法，我愿意提供建议。

谢谢。

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，他们有一个演示链接。