在显示之前调整图像大小

Question

我正在尝试隐藏一个img标记，以便稍后在页面完全加载后我可以使用jquery显示它。

图片作为标记加载：

<img id="img1" src="images/4main.jpg" width="600" height="900" > 

我有css隐藏img：

 #img1 { display:none; } 

在我的外部js文件中

window.onload = function() {
    $("#img1").css('display', 'block !important');
}

这适用于除ie7和ie8之外的所有浏览器。图像保持隐藏状态。

我需要jquery，因为我想在文件显示之前调整文件大小。

任何想法都可以在ie7＆amp; IE8？

Answer 1

尝试使用jQuerys窗口加载功能，而不是这样做：

$(function(){
    $("#img1").css('display', 'block !important');
});

Answer 2

尝试给它一个id并使用jquery内置的帮助程序隐藏/显示

$('#myimage').hide();

Answer 3

这是因为IE会缓存图像，并且onload事件永远不会触发，因为它已经加载了“在缓存中”。 另一个注意事项;不推荐做你想做的事情，因为用户无论如何都会下载整个文件。你应该在服务器端调整它的大小！

但是为了获得你想要的东西，只需使用简单的css（没有onload / display none magic）;

img{
    width:100%;
}

img的父级需要处于position：relative，然后图像将自动与其父级一样大。

希望我帮助

Answer 4

将您的jQuery更改为：

window.onload = function() {
    $("#img1").show();
}

或

$(window).load(function() {
    $("#img1").show();
})