2

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

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

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

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

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

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

在此处输入图像描述

一旦您选择了其他拇指，然后回到第一个拇指（再次使用 a 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) );
}
4

1 回答 1

0

试试这个，我希望它有帮助。

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

于 2013-09-30T22:15:06.767 回答