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

Question

我在我的单页网站上有一个公文包部分(网站按HTML5部分标记分为部分)。

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

文件包部分包含所有图像(16MB)。

<!-- 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部分的延迟加载技术，只在点击“Portfolio”部分时才会加载Portfolio部分的图像？这将节省预加载时间。

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

关于如何优化加载时间，还有其他建议吗？

Answer 1

您可以将<img>更改为类似以下内容：

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

并在需要时将data-src属性更改为带有JavaScript的src，例如，当单击Portfolio部分时。

示例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")
})