使用 jquery 添加的图像未在 webkit 浏览器中显示

Question

我使用 jquery 创建了一个图像节点，并希望将其显示为原始版本之上的更大版本。
复制的图像不会显示在 Chrome 和 Safari 中，但可以在 Internet Explorer 和 Firefox 中显示。控制台不报告错误。检查器显示具有所有正确 css 属性的克隆图像元素，但为元素提供 0 x 0 像素大小。

我没有看到任何暗示 0x0 大小的 css 规则。

这是说明情况的屏幕截图 (http://i.stack.imgur.com/AhiPf.png)

这里有一个演示行为的链接，尝试用 firefox 和 chrome 点击图片： download.toastlab.ch/segtest

---

编辑：

创建元素的 Javascript 代码：

$('.streamcontent').on('click', 'img.clickable', function () {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width,
        h = img.height;
    img = $(img).addClass('bigger');

    var tw = $(this).width();
    var th = $(this).height();

    var pos = $(this).position();
    var center = {
        top: pos.top + th / 2,
        left: pos.left + tw / 2
    };

    img.css({
        position: 'absolute',
        top: pos.top,
        left: pos.left,
        width: tw,
        height: th,
        opacity: 0
    }).animate({
        top: center.top - h / 2,
        left: center.left - w / 2,
        height: h,
        width: w,
        opacity: 1
    }, 300, function () {
        $('body').one('click', function () {
            img.animate({
                top: pos.top,
                left: pos.left,
                width: tw,
                height: th,
                opacity: 0
            }, function () {
                img.remove();
            });
        });
    });
    $(this).parent().append(img);

});

Answer 1

找到了。

有一个 CSS 规则指定了最大尺寸（max-width 和 max-height），我需要覆盖该规则以允许更大的图像...更大。

为此，我用一个高得离谱的值 (999999999px) 覆盖了最大宽度和高度。这个值似乎崩溃“webkit 渲染器图像大小计算”，使图像大小为 0 x 0。将值设置为 9999px 解决了问题

我不知道这是否属于 webkit 错误。

Answer 2

在你的 JS 代码中

$('.streamcontent').on('click', 'img.clickable', function() {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width, h = img.height;
    img = $(img).addClass('bigger');
    ...

我认为你必须改变

var w = img.width, h = img.height;

通过

var w = img.width(), h = img.height();

因为宽度和高度是对象图像中的函数，但我不确定。