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

我在我的单页站点上有一个公文包部分（该站点由HTML5部分标记划分为多个部分）

公文包部分包含所有图像（16MB）

该站点有一个预加载程序，只有在下载了所有内容后才能加载该站点，这会导致大量等待时间

是否有一种可以应用于HTML5节的延迟加载技术，这种技术只会导致在单击“公文包”节时加载公文包节图像？这将节省预加载时间

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

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

您可以将

更改为：

jQuery版本：

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

您可以将

更改为以下内容：

jQuery版本：

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

---

如果将图片加载到较小的屏幕中，您的图片响应不会改变大小。加载页面需要33秒，包括13mb的图像、500kb的JS、500kb或CSS等。您可以对其进行测试。要获得合理的性能，您需要做的不仅仅是懒散地加载图像。@Roberto:我计划添加服务器缓存。这应该是我也尝试了你的建议，但这似乎并没有提高性能。我做错了什么吗？网站在这里：你的图片响应在小屏幕加载后不会改变大小。你的页面加载需要33秒，包括13mb的图片、500kb的JS、500kb或CSS等。你可以测试它。你需要不仅仅是懒散地加载图像以获得合理的性能。@罗伯托：我计划添加服务器缓存。这也应该会有帮助。我尝试了你的建议，但这似乎并没有提高性能。我有没有做错什么？网站在这里：投票支持，因为这是一个很好的编码答案。然而，我认为OP的网站有多个问题ms来解决这个问题。$（“#公文包”）.addEventListener（）->VM794:2未捕获类型错误：$（…）.addEventListener不是函数（…）@Shubham Ahem…

someElement

应该是本机DOM元素，而不是jQuery元素。如果使用jQuery，它应该是

$someElement。单击（function（）{…}）

.Up投票，因为这是一个很好的编码答案。然而，我认为OP的网站有许多问题需要解决，而这些问题不是问题的一部分。$（“#公文包”）.addEventListener（）->VM794:2未捕获类型错误：$（…）。addEventListener不是函数（…）@Shubham Ahem…

someElement

应该是本机DOM元素，而不是jQuery元素。如果使用jQuery，它应该是

$someElement。单击（function（）{…}）

。

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

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

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