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部分的延迟加载技术，这会导致仅在“投资组合”部分时加载“投资组合”部分图像。部分被点击？这将节省预加载时间。

该网站为here，其文件为here。 index.html（所有部分都是here。

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

Answer 1

您可以将<img>更改为：

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

延迟加载包含图像的HTML5部分

1 个答案: