Question

我已经编制了一个小型灯箱，用于在我的网站上查看图像。为了保持加载过程的快速，我想＆＃34;懒加载＆＃34;全尺寸图像。目前浏览器总是加载预览（test.jpg？size = 520px）和全尺寸图像（test.jpg）。

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

该网站仅使用最少的javascript - 但我发现没有＆＃34;没有javascript＆＃34;解。此外，我更喜欢在.js文件中不需要大型html字符串的解决方案，该字符串将在鼠标单击时添加。
大多数延迟加载脚本仅更改图像标记内的属性键。但是，对于HTML 5，现在这是一个有用的方法。也许可以更改<picture>代码（<picture>＆lt;＆lt;＆gt;＆gt; <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;}

Answer 1

考虑使用<template> element。它只是网络组件的一部分。

基本上，您填充<template>中不希望浏览器加载的任何内容，然后在您希望加载内容时移动内容。您进行了更改onload，或onclick，或您喜欢的任何其他事件。无论哪种方式，都不需要做很多JavaScript，也不需要任何库。

看一下本教程：Quick trick: using template to delay loading of images。

不支持该标记的较旧浏览器只是不会获得延迟加载权益，因此也有一个很好的渐进增强奖励。

另一个参考：http://webcomponents.org/articles/introduction-to-template-element/

Answer 2

正如查理所说，唯一的方法是使用JavaScript。

一种解决方案是从rabbitmq-plugins enable rabbitmq_management标记中删除src属性，并仅在单击图像时添加该属性：

<img>

编辑：请参阅aardrian回复，因为该模板解决方案似乎更有趣！

HTML 5＆＃39; <picture>延迟加载（没有jquery）

2 个答案: