javascript - 灯箱将图像移动到右下角

Question

我正在编写一个灯箱图片库，并为正确的图片定位而苦恼。

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

但是这些操作是在图像有时间加载之前执行的。所以 JS 没有所需的信息 clientWidth 和 clientHeight 而是使用 0 。这会导致图像左上角(在加载之前与其他 Angular 相同)位于屏幕中间。当图像开始加载时，它将扩展到右下角。

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

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

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 插入和样式设置(如果您只包装样式更改，您将在插入后看到元素“移动”)。同时在 绑定(bind)加载处理程序后设置您的 src，否则 Internet Explorer 可能会错过处理程序(从缓存加载图像时)。