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

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 然后将仅在图像变得可见时(通过单击拇指)自动加载图像。