如何隐藏图像,但保留图像以前的边框或不透明矩形?遮盖图像也是可以接受的。
这必须适用于不同大小的图像,因此硬编码包含div的大小并设置边框/ bgcolor将不起作用。
我想我可以等待图片加载,获取它的尺寸,然后将其包含的div设置为相同的尺寸。有没有更简单的方法呢?
答案 0 :(得分:2)
如果您只想在加载图片之前保留空间,请使用CSS visibility attribute并将图片可见性设置为hidden
。
.image {
visibility: hidden;
}
尽管图像不可见,但仍然会占用空间,从而保持您的布局不会崩溃。当然不会显示图像边框,但我猜你这样做只是为了在隐藏图像后保留折叠布局。
答案 1 :(得分:1)
如果服务器上的URL为“images / opaque.gif”的1x1像素,则可以执行以下操作:
var theImage = $('img');
theImage
.css({width: theImage.width(), height: theImage.height()})
.attr('src', 'images/opaque.gif');
设置宽度和高度是必要的,因此图像不会调整为1x1。
答案 2 :(得分:1)
将图像放入容器中并将其居中以模仿图像的边框。然后根据需要淡出图片(此处opacity
属性完全正常)或将其visibility
属性设置为hidden
。
这适用于任何类型的图像,只是不要为容器设置宽度和高度。使用padding
来获得所需的边框。
答案 3 :(得分:1)
简单的方法包括将CSS opacity
设置为0
,或visibility
设置为hidden
。
如果您想用相同尺寸的元素替换它,那么
function hideImage(image) {
var s = getComputedStyle(image, null);
var w = s.getPropertyValue("width");
var h = s.getPropertyValue("height");
var d = document.createElement('div');
/* do your supplementary styling, e.g. background in CSS */
/* by default, img elements are display: inline-block;, by the way */
d.className = 'imagecover';
d.style.width = w;
d.style.height = h;
image.parentNode.replaceChild(d, image);
}
hideImage(document.getElementById('some_image_to_hide'));