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

Question

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

尝试在容器中自动缩放这些主图像时，我在 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）时，我无法理解确切的问题是什么？