Question

我正在使用Isotope（jquery）插件处理一个简单的单页产品网站。

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

作为单页网站，大图像按照DOM中的位置加载，并从视图中隐藏。因此，所有27个小型ProductName.jpg图像都不是先完整加载，而是大型ProductName＃.jpg图像。在慢速连接上，所有27个小图像都需要很长时间才能显示，因为浏览器会在DOM中显示每个图像。模拟是here

在浏览器请求并呈现27个小图片之后，我怎样才能将每个最大化的同位素元素的所有大图像的加载推迟？

是否有某种＆＃34;延迟＆＃34;我可以挂钩的特定事件或用户交互后可以设置为激活的插件吗？

我发现的只是＆＃34;懒惰负载＆＃34;寻找滚动事件的插件;我需要的只是，因为我没有＆＃34;滚动到视图＆＃34;内容，这是一个单页网站，是延迟加载最初隐藏的大型幻灯片图像的一种方法。

提前感谢您的一些建议！

＆＃13;

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

＆＃13;

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>

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

1 个答案: