在显示之前调整图像大小

发布于 2025-01-02 16:30:55 字数 491 浏览 0 评论 0原文

我试图隐藏一个 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 和 ie7 上显示的任何想法即8？

原文

I'm trying to hide an img tag so that I can later display it with jquery once page has fully loaded.

The image loads as a tag:

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

I have css to hide img:

 #img1 { display:none; }

in my external js file I have

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

This works fine on all browsers except ie7 and ie8. The image remains hidden.

I need the jquery because I want to resize the file before it displays.

Any ideas as to get it to show on ie7 & ie8?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫性小仙女 2025-01-09 16:30:55

将你的 jQuery 更改为：

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

或者

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

Change your jQuery to this:

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

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

回复收藏 0 原文

陌路终见情 2025-01-09 16:30:55

尝试使用 jQuery 窗口加载函数来代替：

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

Try using jQuerys window load function instead by doing this:

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

回复收藏 0 原文

飘然心甜 2025-01-09 16:30:55

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

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

Try giving it an id and hiding/showing with jquery's built in helprers

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

回复收藏 0 原文

魂牵梦绕锁你心扉 2025-01-09 16:30:55

这是因为 IE 会缓存图像，并且 onload 事件永远不会触发，因为它已经加载到“缓存中”。
另一方面；不建议您执行您想要执行的操作，因为用户无论如何都会下载整个文件。您应该在服务器端调整它的大小！

但要实现你想要的，只需使用简单的CSS（没有onload/display none magic）；

img{
    width:100%;
}

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

希望我有帮助

It's because IE will cache the image, and the onload event will never fire, because its already loaded "in cache".
On an other note; doing what you are trying to do is NOT recommended, since the user will be downloading the whole file anyway. You should resize it on the serverside!

But to acchieve what you want, just use simple css (no onload/display none magic);