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

Question

我的单页网站上有一个作品集部分(网站通过 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 部分的延迟加载技术，该技术会导致仅在单击“Portfolio”部分时才加载“Portfolio”部分图像？这将节省预加载时间。

该网站是 here它的文件是 here 。 index.html(包含所有部分是 here 。

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

Answer 1

您可以更改 <img>类似于:

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

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

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