IE10高度：首次加载时自动发出问题

Question

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

在IE10中尝试自动缩放其容器中的主要图像时，我遇到了一个奇怪的问题。在第一次加载时，我的图像被拉得太高了，但是在它们第一次加载（缓存）之后，我们要求再次渲染它们，高度非常好。

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

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

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

在这里你可以看到图像拉伸：

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

这是我的javascript的相关部分，它循环显示图像数组中的图像，创建拇指，并在这些拇指上设置点击操作。第一次图像是.html（）'d进入容器，它的方式很大。第二个及以后的大小正确。

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）时，我无法理解它是什么问题？