仅在点击时加载灯箱图像 - 减少页面加载时间

Question

我用一些简单的CSS灯箱代码编写了一个新闻页面，它工作得很好，直到页面的加载时间变得疯狂，因为它在它们甚至显示之前加载了所有图像。

有10或12张图片很好，但我已经添加了更多的图像到页面，现在它是一个巨大的野兽。 我已经为图像封面实现了延迟加载，这改善了一些东西。

我现在唯一需要的是灯箱图像在点击时加载，而不是在您第一次导航到页面时。 我正在寻找一个简单的HTML或CSS解决方案，但如果需要，可以选择Javascript或Jquery。

该页面的链接：

http://agentboris.com/press/index-2.php#_

以下是包含灯箱效果和延迟加载的图像的HTML：

点击查看

<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">&#8592; BACK <br/></p>
  <img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>

而CSS：

/** LIGHTBOX MARKUP **/

.lightbox {
    /** Default lightbox to hidden */
    display:none;
    /** Position and style */
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 10000px;
    left: 0;    
    background-color: #fafbff;
    overflow:auto;
}


.lightbox img {
    /** Pad the lightbox image */
    /*max-width: 90%;*/
    margin-top: 2%;
    border: solid 1px #E0E0E0;
}


.lightbox:target {
    /** Remove default browser outline */
    outline: none;
    position: fixed;
    top: 0;
    left: 0;    

    /** Unhide lightbox **/
    display: block;
}

Answer 1

只需使用lazySizes 。 您唯一需要做的就是更改标记并添加类lazyload （假设您已经有data-src ）：

<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">

lazySizes然后将自动仅加载图像，如果图像变得可见（通过点击拇指）。

Answer 2

不是一个php家伙，但是你能不能通过API调用来获取图像的src，而不是将它们分配给img吗？

意思是，你有XX个缩略图（我假设）。 但它正在加载更大的图像，这就是问题所在。 因此，只有（1）灯箱，但在点击时切换出图像src 。

此外，由于您已使用-thumb后缀命名所有图像（大），因此您不需要进行API调用。

HTML

<div class="presscoll">
   <a href="#boris-2014-awards" class="show-lightbox">
      <img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
   </a>
   ..... more thumbnails
</div>

只有（1）这些。

<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
      <br /><p class="parastyle" style="letter-spacing: 0.05em;">&#8592; BACK <br/></p>
      <img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
    </a>

---

$('.presscoll').on('click' 'a.show-lightbox', function(e) {
     // get src and remove "-thumb"
     var src = $(this).find('img').attr('src');
     src = src.replace('-thumb', '');

     // change image attr
     $('#show-lightbox').find('img').attr('src', src);

     // may need to call lightbox initialize again here
});

基本上我们只列出你所有的缩略图，但是没有理由加载所有XXX的大图像。 只需拥有灯箱的基本元素，然后在“大”图像上切换src。 如上所述，您可能需要重新调用灯箱。

这不是btw测试，但这个想法会起作用。