jquery - IE10高度:auto issue on first load

Question

我写了一个小画廊，当点击拇指时，我们使用 JS 创建 new Image()'s 并用所选图像的完整版本替换主图像。

当我尝试在容器内自动缩放这些主图像时，我在 IE10 中遇到了一个奇怪的问题。第一次加载时，我的图像被拉伸(stretch)得太高，但在第一次加载(缓存)后，我们要求再次渲染它们，高度就完全没问题了。

我没有使用 javascript 设置高度，只是使用 CSS:

#flikr-gallery-image-main {
    min-height:300px;
}

#flikr-gallery-image-main img {
    width:100%!important;
    height:auto!important;
}

在这里您可以看到图像拉伸(stretch):

一旦您选择了其他拇指，然后回到第一个拇指(再次使用new Image())，它的高度就会完美呈现。什么会导致 IE10 在第一次源加载时“卡住”并增大高度？

这是我的 javascript 的相关部分，它循环遍历图像数组中的图像，创建拇指，并设置这些拇指上的单击操作。第一次将图像通过 .html() 放入容器中时，它非常大。第二个及之后的尺寸正确。

for( var i in flikr.photos )
{
    var thumb = new Image();
    $(thumb)
        .attr({
            'title':flikr.photos[i].title
        })
        .css({
            'cursor':'pointer'
        })
        .click(function()
        {
            var index = $(this).index();
            var img = new Image();
            img.src = flikr.photos[index].image_url;
            $('#flikr-gallery-image-main').html( img );
        });

    thumb.src = flikr.photos[i].thumbnail_url;

    $('#flikr-gallery-strip-thumbs').append( $(thumb) );
}

Answer 1

试试这个，希望有帮助。

for( var i in flikr.photos )
{
    var $thumb = $('<img/>'); 
    $thumb
        .attr({
            'title':flikr.photos[i].title,
            'src':flikr.photos[i].thumbnail_url
        })
        .css({
            'cursor':'pointer'
        })
        .click(function()
        {
            var index = $(this).index();
            var $img = $('<img/>');
            $img.prop('src',flikr.photos[index].image_url);
            $('#flikr-gallery-image-main').html( $img );
        });

    $('#flikr-gallery-strip-thumbs').append($thumb);
}

我无法理解当您想在图像点击时创建图像(onclick)时，确切的问题是什么？