Question

根据容器的当前高度/宽度，我有一个以编程方式调整大小的图像。我的问题是它在调整大小之前显示图像的原始大小。

请参阅此JSFiddle

你会注意到它如何在一张拉伸的图像中闪现，然后才能很好地适应中间的图像。

我希望隐藏图像，直到调整大小，但我无法弄清楚如何。

有什么建议吗？

JSCode：

function LoadImg(img) {
    img.css('visibility','hidden');
    var src=img.attr('src');
    var imgh = img.parent().height();
    var imgw = img.parent().width();
    var pattern = /&?(w|h)=[^&]+/g;
    src = src.replace(pattern, '');
    img.attr('src', src + '&w=' + imgw + '&h=' + imgh);    
    img.css('visibility','');
}

HTML：

<div class="window">
<img src="http://www.angclassiccarparts.co.uk/image_anysize.aspx?f=/images/ww/panel/service_kits.jpg&w=154&h=154&color=png" id="img" onload="LoadImg($(this));" />
</div>

我已经尝试隐藏可见性隐藏，直到该函数运行，但是不等待它加载......

Answer 1

您正在更改图像的来源，这会强制它加载新图像，然后您立即将图像设置为可见。

最终你要等到第二张图片加载后再显示，这可以使用.load()来实现，如下所示：

img.on('load', function() {
    img.css('visibility','visible');
});

这是一个更新的jsFiddle，其中包含工作代码：http://jsfiddle.net/ev4YL/2/

但是，我会建议采用不同的方法。加载图像没有多大意义，然后在加载图像时加载另一个图像。也许您应该将维度存储在html数据属性中，然后在document.ready上动态加载图像。

如果您将每张图片设置为data-src而不是src，则可以使用以下内容：

$('img').each(function() {
    var img = $(this);

    var src = img.attr('data-src');
    var imgh = img.parent().height();
    var imgw = img.parent().width();
    var pattern = /&?(w|h)=[^&]+/g;
    src = src.replace(pattern, '');
    img.attr('src', src + '&w=' + imgw + '&h=' + imgh);    

    img.on('load', function() {
        img.css('visibility','visible');
    });
});

这里的演示：http://jsfiddle.net/ev4YL/4/

Answer 2

您可以使用display：none隐藏图像，直到函数结束，然后将图像设置为display：block（或者您需要的任何内容）。这样，函数的其余部分已经运行，当它显示时它已经被调整大小。

请参阅JSFiddle

但基本上只是： CSS：

img {
  display: none;
}

JavaScript的：

function loadImg(img) {
  ----all of your function here----
  img.css('display', 'block');
}

JQuery：如何在源更改之前隐藏图像

2 个答案: