JQuery：如何隐藏图像直到源更改

Question

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

看到这个JSFiddle

您会注意到它是如何在拉伸后的图像很好地适合中间的图像之前闪烁的。

我想在调整大小之前隐藏图像，但我不知道怎么做。

有什么建议吗？

JS代码：

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');
}