模式打开时触发多个惰性图像

Question

问题：我的代码仅适用于 1 张图像。目标：用更少的代码使其适用于多个图像。

我总是尝试使用尽可能少的代码，避免在 DOM 中使用太多 javascript 或任何其他语言。我从网上研究了一些类似的问题，但没有成功。如果您能提供帮助，我将不胜感激。

function toggleModal(e, c, t) {
  var d = document.getElementById(c);
  e.checked && d.src != t && (d.src = t)
}

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .01s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal__inner {
  transition: top .01s ease;
  height: max-content;
  position: relative;
  max-width: 1200px;
  width: -webkit-fill-available;
  margin: auto;
  padding: 1em 1em;
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: 0;
  /*-.3em*/
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}

<p>In our <label for="modal-store">store</label>.</p>

<input class="modal-state" id="modal-store" type="checkbox" onchange="toggleModal(this, 'first-image', 'https://homepages.cae.wisc.edu/~ece533/images/cat.png')" />

<div class="modal">
  <label class="modal__bg" for="modal-store"></label>
  <div class="modal__inner"><label class="modal__close" for="modal-store"></label>
    <p>
      <div>
        <img id="first-image" src="" loading="lazy">
      </div>
    </p>
  </div>
</div>

Answer 1

因此，如果您有图像数组 id 和图像 src，只需使用这些值调用 toggleModal 函数，遍历 cs 参数这将是 id 数组，检查输入是否为 checked 并且 src 是否与 ts 数组中的不相同。

当图像的 src 为空时，不需要在 img 标签上设置 loading 属性，这意味着没有要加载的内容。

我建议您停止使用内联事件处理程序 onevent。

const c = ['first-image', 'second-image', 'third-image'];
const t = ['https://homepages.cae.wisc.edu/~ece533/images/cat.png', 'https://homepages.cae.wisc.edu/~ece533/images/fruits.png', 'https://homepages.cae.wisc.edu/~ece533/images/boat.png'];

document.getElementById('modal-store').addEventListener('change', e => toggleModal(e.target, c, t));

function toggleModal(e, cs, ts) {
  cs.forEach((c, i) => {
    var d = document.getElementById(c);
    if (e.checked && d.src != ts[i]) d.src = ts[i];
  });
}

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .01s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal__inner {
  transition: top .01s ease;
  height: max-content;
  position: relative;
  max-width: 1200px;
  width: -webkit-fill-available;
  margin: auto;
  padding: 1em 1em;
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: 0;
  /*-.3em*/
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}

<p> In our <label for="modal-store">store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-store"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-store"></label>
    <div>
      <div><img id="first-image" /></div>
      <div><img id="second-image" /></div>
      <div><img id="third-image" /></div>
    </div>
  </div>
</div>

模式打开时触发多个惰性图像

Trigger multiple lazy images when modal opens

html

javascript

lazy-loading

modal-dialog