推迟或延迟在单个页面上加载大图像

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>