延迟或延迟在单页网站上加载大图像答案

【问题标题】：Defer or Delay loading large images on a single page site延迟或延迟在单页网站上加载大图像
【发布时间】：2016-01-30 04:13:00
【问题描述】：

我正在使用 Isotope (jquery) 插件开发一个简单的单页产品网站。

有 27 个最小化的同位素元素（每个产品一个），点击后可以最大化以显示大图像和文本。每个同位素元素如下所示。

作为单页网站，大图像会根据它们在 DOM 中的位置加载并隐藏在视图之外。因此，所有 27 个小 ProductName.jpg 图像都不会首先加载完整，然后是大 ProductName#.jpg 图像。在慢速连接上，所有 27 个小图像都需要很长时间才能显示出来，因为浏览器请求每个图像在 DOM 中出现时的样子。一个模型是here

如何将每个最大化同位素元素的所有大图像的加载推迟到浏览器请求和呈现 27 个小图像之后？

是否有某种“延迟”插件可以设置为在我可以挂钩的某个事件或用户交互之后触发？

我发现的只是寻找滚动事件的“延迟加载”插件；我在这里只需要，因为我没有“滚动查看”内容，这是一个单页网站，是一些延迟加载最初隐藏的大型幻灯片图像的方法。

提前感谢您的一些建议！

    <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>

【问题讨论】：

标签： jquery html jquery-isotope

【解决方案1】：

经过很长时间，我通过https://stackoverflow.com/a/17735541/963514 用户 seadebutts 发现了如何在没有任何“延迟加载”插件的情况下做到这一点。这段 javascript 延迟了大图像的加载，归因于 .delay 类，适合我的情况 - 1 秒。现在网站运行良好 - 渲染速度很快，当用户点击 Isotope 项目时，其中的图像已加载。

<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>

【讨论】：