纯JavaScript的Lightbox效果未按预期工作

我正在尝试使用下面的代码实现点击图像时的Lighbox效果

        document.addEventListener('click',function(){
        var target = event.target || event.srcElement;
        if(target.className == "acv"){
            var id = target.id, src= target.src, 
            type = target.nodeName, imgW, imgH,
            temp = document.createElement('div'),
            sHeight = screen.availHeight,    
            sWidth = screen.availWidth,
            st = temp.style;
            var img = new Image();
            img.onload = function(){
                imgW = this.width;
                imgH = this.height;
            }
            img.src = src;
            var imgH = ( sHeight >= imgH + 20 ? imgH : (sHeight - 20) );
            var imgW =  ( sWidth >= imgW + 20 ? imgW : (sWidth - 20) );
            img.style.height = imgH;
            img.style.width = imgW;
            img.style.position = "relative";
            img.style.left = ( (sWidth - imgW) / 2 ) + "px";
            img.style.top = ( (sHeight - imgH) / 2 ) + "px";
            temp.appendChild(img);
            temp.id = "lightbox";
            st.width = sWidth + "px";
            st.height = sHeight + "px";
            st.backgroundColor = "Gray";
            st.zIndex = 123;
            st.position = "absolute";
            st.top = st.left = 0;
            st.margin = "0 auto";
            document.body.appendChild(temp);
        }
    });​

请检查工作小提琴

---

我觉得我在这件事上做错了什么。请更正并帮助我改进代码

似乎，如果映像已加载onload事件未触发，那么尝试使用在事件体中初始化的ImgW和ImgH在事件处理程序范围之外使用也是错误的，至少，您还应该在事件处理程序中“修复”img，到目前为止，这段代码适用于：

我还想使用窗口宽度/高度来计算位置

请注意，上面的代码并没有给出您的生产代码，它只是为了说明哪里是逻辑错误。 如果尝试单击jslint按钮，您可能不会问这个问题

---

作为补充。。。我认为，在某些浏览器中，当从缓存中获取图像时，会出现一种情况，即图像已经加载，并且未触发

onload（）

事件。是的，你说得对，但它仍然需要修复onload处理程序（因为图像可能未加载），我在示例中没有这样做，因为经过解释后，我认为OP会自己做，同样，即使onload触发，原始代码也不会工作，因为它可能会在

单击
处理程序完成后触发，但不会发生冲突-只是没有事件。检查
img.complete
attribute是否可以更新代码eicto。这将对我很有帮助。
document.addEventListener('click', function() {
    var target = event.target || event.srcElement;
    if (target.className == "acv") {
        //     debugger;
        var id = target.id,
            src = target.src,
            type = target.nodeName,
            imgW, imgH, temp = document.createElement('div'),
            sHeight = screen.availHeight,
            sWidth = screen.availWidth,
            st = temp.style;
        var img = new Image();
        img.src = src + '?rand=' + Math.random();
        //HIDE before we sure that image loaded!
        img.style.display = "none";
        var pos_img = function(img) {
            var imgH = img.height,
                imgW = img.width;
            imgH = (sHeight >= imgH + 20 ? imgH : (sHeight - 20));
            imgW = (sWidth >= imgW + 20 ? imgW : (sWidth - 20));
            img.style.height = imgH;
            img.style.width = imgW;
            img.style.position = "relative";
            img.style.left = ((sWidth - imgW) / 2) + "px";
            img.style.top = ((sHeight - imgH) / 2) + "px";
            //SHOW IMAGE BACK
            img.style.display = "block";
        };
        //image not loaded?
        if (img.complete === false) {
            img.addEventListener('load', function(e) {
                console.log("LOAD", e, img);
                //TODO remove EventListener ?
                pos_img(img);
            });
        } else {

            pos_img(img);
        }
        temp.appendChild(img);
        temp.id = "lightbox";
        st.width = sWidth + "px";
        st.height = sHeight + "px";
        st.backgroundColor = "Gray";
        st.zIndex = 123;
        st.position = "absolute";
        st.top = st.left = 0;
        st.margin = "0 auto";
        document.body.appendChild(temp);

    }
});​