延迟加载带有图像的 HTML5 部分答案

【问题标题】：Lazy Loading HTML5 Section with Images延迟加载带有图像的 HTML5 部分
【发布时间】：2016-03-13 16:30:27
【问题描述】：

我的单页网站上有一个投资组合部分（网站按 HTML5 部分标签划分为多个部分）。

 <section id="portfolio" class="light-bg">

作品集部分包含所有图片 (16 MB)。

<!-- Portfolio item -->
    <div class="item graphic-design">
      <a href="#folio-popup">
        <img src="img/portfolio/graphic-design/felicity/2.jpg" alt="Portfolio"/>
        <div class="details">
        <h4 class="title">Felicity</h4>
             <p class="des decription">
              6 day count down teaser for Felicity'14.
             </p>
        </div>
         <i class="icon-share-alt"></i>
           <div class="overlay"></div>
         </a>
    </div>
<!-- /Portfolio item -->

该网站有一个预加载器，它仅在下载所有内容后才加载该网站，这会导致大量等待时间。

是否有可以应用于 HTML5 部分的延迟加载技术，这会导致仅在单击“投资组合”部分时才加载投资组合部分的图像？这将节省预加载时间。

该站点为here，其文件为here。 index.html（包含所有部分是here。

关于如何优化加载时间的任何其他建议？

【问题讨论】：

如果在较小的屏幕上加载后，您的图片响应不会改变 onresize。
您的页面加载需要 33 秒，包括 13mb 的图像、500kb 的 JS、500kb 或 CSS 等。您可以测试它here。您需要做的不仅仅是延迟加载图像才能获得合理的性能。
@Roberto：我打算添加服务器缓存。这也应该有帮助。
我已经尝试过您的建议，但这似乎并没有提高性能。我做错什么了吗？网站在这里：goo.gl/0kvDFX

标签： javascript jquery ajax html lazy-loading

【解决方案1】：

您可以将<img>s 更改为：

<img data-src="img/portfolio/graphic-design/felicity/2.jpg" alt="Portfolio"/>

并在需要时使用 JavaScript 将 data-src 属性更改为 src，例如在单击“投资组合”部分时。

示例 JavaScript 代码：

someElement.addEventListener("click", function() {
  Array.from(document.querySelectorAll("img[data-src]"))
    .forEach(element=> {
      element.src = element.getAttribute("data-src")
      element.removeAttribute("data-src")
    })
})

jQuery 版本：

$jQueryElement.click(function() {
  $("img[data-src]").attr("src", function() {
    return $(this).attr("data-src")
  }).removeAttr("data-src")
})

【讨论】：

投票赞成，因为这是一个很好的编码答案。然而，我认为 OP 的网站有多个问题需要解决，而这些问题并不是问题的一部分。
$('#portfolio').addEventListener() ->VM794:2 Uncaught TypeError: $(...).addEventListener is not a function(...)
@Shubham Ahem...someElement 应该是原生 DOM 元素，而不是 jQuery 元素。如果你使用 jQuery，它应该只是 $someElement.click(function() { ... })。