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;">← 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测试，但这个想法会起作用。

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

2 个答案: