时间戳

首页 > 解决方案 > 仅在 Laravel 中打开模式时加载图像

laravel - 仅在 Laravel 中打开模式时加载图像

问题描述

描述

我有一张小预览图片，单击它时，会打开一个带有更大图像的模式。

<a onClick="ToggleImage()" class="toggle-img-btn">
<img class="about-img" src="{{asset("storage/images/about_170.jpg")}}" /></a>

@include('inc.imageModal')

和图像模式：

<div class="img-modal-background" id="img-modal-background">
  <div class="img-modal-content">
    <input type="checkbox" class="img-close" onClick="ToggleImage()" />
    <a class="img-close-cross"></a>
    <img class="modal-img" src="{{asset("storage/images/about.jpg")}}">
  </div>
</div>

以及用于打开/关闭模式的 JavaScript 函数：

function ToggleImage() {
    const modalBG = document.getElementById("img-modal-background");
    const modalIMG = document.querySelector(".modal-img");
    if (modalBG.style.display === "flex") {
        modalBG.style.opacity = "0";
        setTimeout(() => {
            modalBG.style.display = "none";
            modalIMG.style.display = "none";
        }, 500);
    } else {
        modalBG.style.display = "flex";
        modalIMG.style.display = "inherit";
        setTimeout(() => {
            modalBG.style.opacity = "1";
        }, 10);
    }
}

问题

当用户打开模态时，我只想在模态中加载图像。

我怎样才能做到这一点？

我使用 Laravel 7 和纯 JS。

你可以在这里找到回购

谢谢你的时间 ：）

标签： laravelimage-loading

解决方案

您可以将图像路径放在 js 变量上并设置属性 img src 依赖于模态状态，如下所示：

function ToggleImage() {
const modalBG = document.getElementById("img-modal-background");
const modalIMG = document.querySelector(".modal-img");
const img = "storage/images/about.jpg";

if (modalBG.style.display === "flex") {
    modalBG.style.opacity = "0";
    modalIMG.setAttribute("src", "");
    setTimeout(() => {
        modalBG.style.display = "none";
        modalIMG.style.display = "none";
    }, 500);
} else {
    modalBG.style.display = "flex";
    modalIMG.style.display = "inherit";
    modalIMG.setAttribute("src", img);
    setTimeout(() => {
        modalBG.style.opacity = "1";
    }, 10);
}

}

推荐阅读