Javascript HTML 5'；s<；图片>；延迟加载（不带jquery）

我已经为在我的网站上查看图像编程了一个小灯箱。为了保持加载过程快速，我想“延迟加载”完整大小的图像。目前浏览器总是加载预览（test.jpg？size=520px）和全尺寸图像（test.jpg）

是否有任何简单的解决方案可以防止浏览器在单击图像之前加载全尺寸图像

• 该网站只使用了最少的javascript，但我没有发现“无javascript”解决方案。此外，我更喜欢一种解决方案，它不需要在.js文件中包含大的html字符串，这些字符串将在鼠标单击时添加
• 大多数延迟加载脚本只更改图像标记内的属性键。然而，在HTML5中，这不再是一种有用的方法。是否可以更改
  标记（
  ）并预取全尺寸图像

HTML:

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;}

考虑使用。它只是web组件的一部分

基本上，您可以在

中填充任何不希望浏览器加载的内容，然后在希望加载内容时移动内容。您可以更改

onload

，或

onclick

，或任何其他您喜欢的事件。无论哪种方式，它都不需要很多JavaScript，也不需要任何库

请看本教程：

不支持标签的旧浏览器无法获得延迟加载的好处，因此也有一个很好的渐进增强功能

---

另一个参考资料：

正如Charlie所说，实现这一点的唯一方法是使用JavaScript

一种解决方案是从

标记中删除

src

属性，并仅在单击图像时添加该属性：

---

编辑：请看aardrian的回复，因为模板解决方案似乎更有趣

不幸的是，没有一种方法可以轻松加载CSS。如果图像包含在img/图片标签的中，将立即加载。原因是CSS不是一种动态语言。使用CSS延迟加载内容的唯一方法是使用Javascript/jQuery。它向后兼容到IE6@BekimBacaj您的解决方案需要CSS中的完整图像文件名（背景：url）。因此，我认为aardrian的解决方案似乎更适合动态网页，而事实并非如此。该演示被迫使用实时但完全陌生的外部图像源，其绝对路径使其能够演示其功能，但对于属于您且驻留在您自己域中的图像，它们是完全不必要的，但您应该知道这一点。相对路径非常短。这是为了说明仅使用css1.2可以做什么：这是一个完美的解决方案。非常感谢。它在Chrome和Firefox中工作得非常好。应该是Edge，但它还不起作用…：-）

.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;}

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;}

function lightboxshow(object) {
    var imageccbox = document.getElementById(object);

    var img = imageccbox.getElementsByTagName('img')[0];
    img.setAttribute('src', 'test.jpg');

    imageccbox.style.display='block';
    setTimeout(function() {imageccbox.getElementsByClassName("imageccboxpicture")[0].style.opacity = 1.0;}, 25);
     window.location.hash = object;
}