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

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/