javascript - HTML 5的<picture>延迟加载(没有jquery)

我已经编写了一个小型灯箱，用于查看网站上的图像。为了保持快速加载过程，我想“延迟加载”完整尺寸的图像。目前，浏览器始终会加载预览(test.jpg？size = 520px)和全尺寸图片(test.jpg)。有没有简单的解决方案可以防止浏览器在单击图像之前加载完整尺寸的图像？该网站仅使用最少的javascript-但我没有找到“no javascript”解决方案。另外，我更喜欢一种解决方案，该解决方案不需要在鼠标单击时添加的.js文件中的大型html字符串。 大多数延迟加载脚本仅更改image标记内的属性键。但是，现在使用HTML 5不再是一种有用的方法。也许可以更改<picture>标签(<picture> > <picture-disabled>)并预取全尺寸图片？ HTML:<div class="imagecc"> <picture onclick="lightboxshow('test004.jpg')"> <source type="image/webp" srcset="test004.webp?size=520px"> <img src="test.jpg?size=520px" alt="..."> </picture> <p class="imgcaption">...</p></div><div id="test004.jpg" class="imageccbox" onclick="lightboxclose(this)"> <div class="imageccboxpicture"> <picture> <source type="image/webp" srcset="test004.webp"> <img src="test.jpg"> </picture> </div></div>CSS:.imageccbox { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,1)); text-align: center;}.imageccbox:target { background: rgba(255,255,255,0.8); display: block; outline: none;}.imageccbox:target > .imageccboxpicture {opacity: 1.0;}.imageccboxpicture { margin-top: 5%; opacity: 0.4; transition: opacity 500ms linear; cursor: none;}JavaScript:function lightboxshow(object) { var imageccbox = document.getElementById(object); imageccbox.style.display='block'; setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25); window.location.hash = object;} (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 考虑使用 <template> element。它只是Web组件的一部分。本质上，您会将不需要浏览器加载的任何内容填充到<template>中，然后在希望加载该内容时移动它。您可以进行onload或onclick或您喜欢的任何其他事件的更改。无论哪种方式，它都不需要执行很多JavaScript，并且您不需要任何库。看一下本教程:Quick trick: using template to delay loading of images。不支持该标记的旧版浏览器将不会获得延迟加载的好处，因此那里也有不错的渐进增强功能。另一个引用:http://webcomponents.org/articles/introduction-to-template-element/ (adsbygoogle = window.adsbygoogle || []).push({});