Question

我正在写一个灯箱图片库并且正在努力寻找正确的图像。

单击图像时，会出现灯箱。这是一个用JS生成的全新对象。通过设置边距，我将其移动到屏幕中间（使用z-index）。

但是这些动作是在图像加载时间之前执行的。因此，JS没有所需的信息clientWidth和clientHeight，而是使用0。这会影响左上角的图像角（在加载与其他角落相同之前）位于屏幕中间。当图像开始加载时，它将扩展到右下角。

如何在屏幕上正确定位图像？

PS：没有与lightbox / lightbox2库的连接。

PPS：相关代码：

JS：

function lightbox(res, dsc) {
    // lbimg: Lightbox-Image
    var lbimg = document.createElement("img");
    lbimg.src = res;
    lbimg.id = "lbimg";
    document.body.insertBefore(lbimg, document.body.firstChild);
    lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2.) + "px";
    lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2.) + "px";
}

CSS：

#lbimg {
    max-width: 70%;
    max-height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 10px solid #fff;
    z-index : 10;
}

HTML（仅显示微缩图像）：

<div class="list">
    <div><a onclick="lightbox('image.JPG', ''); "><img class="mini" src="image.JPG_MINI.jpg" /></a></div>
    <!--other images are defined analogous-->
</div>

Answer 1

尝试在上传呼叫中包装保证金计算：

lbimg.onload = function () {
    lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2.) + "px";
    lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2.) + "px";
};

这将确保JS可以使用高度和宽度，以便正确计算边距。

Answer 2

function lightbox(res, dsc) {
    var lbimg = document.createElement("img");
    lbimg.id = "lbimg";
    lbimg.onload = function() {
        document.body.insertBefore(lbimg, document.body.firstChild);
        lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2) + "px";
        lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2) + "px";
    };
    lbimg.src = res;
}

您必须在加载处理程序中包装DOM插入和样式设置（如果仅换行样式更改，则会在插入后看到元素“移位”）。还要在绑定加载处理程序后设置src ，否则Internet Explorer可能会错过处理程序（从缓存加载图像时）。

灯箱将图像移动到右下角

2 个答案: