推遲或延遲在單個頁面上加載大圖像

Question

我正在使用同位素（jquery）插件在簡單的單頁產品網站上工作。

有27個最小化同位素元素（每個產品一個），可以通過單擊以最大化顯示大圖像和文本。每個Isotope元素如下所示。

作爲一個單頁面網站，大圖像按照它們在DOM中的位置加載並隱藏起來。因此，所有27個小的ProductName.jpg圖像不會全部首先加載，而是之後的大型ProductName＃.jpg圖像。在速度較慢的連接上，所有27個小圖像都顯示時間過長，因爲瀏覽器會請求每個圖像出現在DOM中。模型是here

如何在瀏覽器請求並呈現27個小圖像後，將每個最大化的Isotope元素的所有大圖像的加載推遲到什麼程度？

是否有某種「延遲」插件可以設置爲在某個事件或用戶交互後可以觸發我可以掛鉤？

我發現的所有內容都是尋找滾動事件的「延遲加載」插件;儘管我只需要這裏，因爲我沒有「滾動查看」內容，這是一個單頁面網站，是延遲加載最初隱藏的大型幻燈片圖像的一些方法。

在此先感謝您的一些建議！

<div class="item large" data-item="Product Name"> 
 
     
 
     <div class="header active"> 
 
     
 
      <div class="status"></div> 
 
      
 
      <h1>Product Name</h1> 
 
      <h2 lang="sv">Product Descriptor</h2> 
 
      <h2 lang="en">Product Descriptor</h2> 
 
      <h2 lang="de">Product Descriptor</h2> 
 
      
 
     </div> 
 
     
 
     <div class="minimised" style="background-color: #fff"> 
 
     
 
      <img src="media/ProductName.jpg" width="312" height="312" alt="#"/> 
 
       
 
     </div> 
 
     
 
     <div class="maximised"> 
 
     
 
      <h2 lang="sv">#</h2> 
 
      <h2 lang="en">#</h2> 
 
      <h2 lang="de">#</h2> 
 
      <div class="slideshow"> 
 
       <img src="media/ProductName1.jpg" width="640" height="960" alt="#"/> 
 
       <img src="media/ProductName2.jpg" width="640" height="960" alt="#"/> 
 
       <img src="media/ProductName3.jpg" width="640" height="960" alt="#"/> 
 
       <img src="media/ProductName4.jpg" width="640" height="960" alt="#"/> 
 
      </div> 
 
      
 
      <p lang="sv">#</p> 
 
      <p lang="en">#</p> 
 
      <p lang="de">#</p> 
 
      
 
      <p lang="sv" class="infoheader">#</p> 
 
      <p lang="en" class="infoheader">#</p> 
 
      <p lang="de" class="infoheader">#</p> 
 
      <p lang="sv" class="infotext">#</p> 
 
      <p lang="en" class="infotext">#</p> 
 
      <p lang="de" class="infotext">#</p> 
 
      <img class="info" src="media/IconColoursProductName.png" width="212" height="32" alt="#"/> 
 
      
 
      <p lang="sv" class="infoheader">#</p> 
 
      <p lang="en" class="infoheader">#</p> 
 
      <p lang="de" class="infoheader">#</p> 
 
      <p lang="sv" class="infotext">#</p> 
 
      <p lang="en" class="infotext">#</p> 
 
      <p lang="de" class="infotext">#</p> 
 
      <p lang="sv" class="infotext">#</p> 
 
      <p lang="en" class="infotext">#</p> 
 
      <p lang="de" class="infotext">#</p> 
 
      
 
      <p lang="sv" class="infoheader">#</p> 
 
      <p lang="en" class="infoheader">#</p> 
 
      <p lang="de" class="infoheader">#</p> 
 
      <a href="media/ProductName.pdf" target="_blank"><img class="info" src="media/IconAdobePDF.png" width="32" height="32" alt="#"/></a> 
 
      <p> </p> 
 
      
 
     </div> 
 
     
 
    </div>

Answer 1

後多少時間，我發現瞭如何通過https://stackoverflow.com/a/17735541/963514從用戶seandebutts做到這一點沒有任何「延遲加載」插件。這一點的JavaScript延遲加載大圖像，歸因於一類.delay，適合我的情況 - 1秒。現在，該網站的行爲良好 - 快速呈現，當用戶點擊同位素項目時，其中的圖像被加載。

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    setTimeout(function() { 
 
    $('.delay').each(function() { 
 
     var imagex = $(this); 
 
     var imgOriginal = imagex.data('original'); 
 
     $(imagex).attr('src', imgOriginal); 
 
    }); 
 
    }, 1000); 
 
}); 
 
</script>