jQuery從一個位置提取html代碼並將其放置在另一個位置

Question

我正在嘗試操縱橫幅滑塊，該滑塊將從所有橫幅中獲取所有DOM呈現的img標簽（除了第一個），然后通過設置的Timeout以幾秒鍾的增量一次將它們加載回一個。 由於圖像的數量/大小，我只是試圖不降低頁面加載量。

我的問題是，我似乎無法獲得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 ，他們有一個演示鏈接。