Question

我已经创建了一个图库，您可以在其中单击图像以显示更大的版本。单击图像时，会在下面的行中插入新图像。我遇到了一个错误，我无法找到解决方法。例如，如果单击第一行上的图像，则会显示图像的预览。然后，如果单击下面两行的图像，则不会显示图像预览。它不适用于Chrome或Safari。在Firefox中它很棒。

这是我使用的Javascript和jQuery（2.0.3）：

$(document).on("click", ".imgBox", function(){
    imgsrc = $(this).find('img').attr('src');
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>');
    imgClicked = $(this);
    $('.bigBox').remove()
    if ($(".bigBox").length > 0){

            bigBox.find('img').attr('src', imgsrc);
            bigBox.insertAfter(imgClicked);
    } else {
            bigBox.insertAfter(imgClicked).css('display', 'block');
    }


});

我创建了一个JSFiddle，以便您可以自己尝试。只需确保调整浏览器窗口大小，以便至少获得3行。

我在OSX上的Chrome 30.0.1599.101，Safari 6.0.5和Firefox 24.0中进行了测试。

Answer 1

警告：此解决方案有点hackery。：）

我注意到，当我调整jsfiddle窗口时，chrome会显示此图像，因为我将其设置为in the comment。所以我开始尝试再次“愚弄”铬重绘的方法。有many ways that cause a repaint。我选择操纵style属性。

因此，我创建了一个简单的检查，将overflow属性从auto动态设置为visible（这两个值都不应该破坏您的布局。当用户点击时我会切换这些值像这样：http://jsfiddle.net/HeQGL/5/

P.S。注意虽然我改变了你的脚本。更改了事件侦听器的元素，在函数内部使用了变量，并使用.detach()而不是.remove()，因为当我们需要将元素重新插入DOM时，它更适合。

Answer 2

我在Windows上的Chrome 30.0.1599.101 m中进行了测试，效果非常好。

图片库预览无法在Chrome和Safari中正确显示

2 个答案: