僅在點擊時加載燈箱圖像 - 減少頁面加載時間

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測試，但這個想法會起作用。