javascript - JQuery:如何在源更改之前隐藏图像

Question

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

查看此 JSFiddle

您会注意到它如何在将图像很好地置于中间之前闪现出拉伸(stretch)图像。

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

有什么建议吗？

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/