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

Lazy Loading HTML5 Section with Images

本文关键字：HTML5 部分 图像 延迟加载      更新时间：2023-09-26

我的单页网站上有一个作品集部分（网站按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部分的延迟加载技术，这会导致投资组合部分图像仅在单击"投资组合"部分时加载？这将节省预加载时间。

该网站在这里，它的文件在这里。索引.html（包含所有部分）在这里。

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

您可以将

<img> s 更改为如下所示的内容：

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

并在需要时将 data-src 属性更改为使用 JavaScript 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")
    })
})

j查询版本：

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