Question

如何隐藏图像，但保留图像以前的边框或不透明矩形？遮盖图像也是可以接受的。

这必须适用于不同大小的图像，因此硬编码包含div的大小并设置边框/ bgcolor将不起作用。

我想我可以等待图片加载，获取它的尺寸，然后将其包含的div设置为相同的尺寸。有没有更简单的方法呢？

Answer 1

如果您只想在加载图片之前保留空间，请使用CSS visibility attribute并将图片可见性设置为hidden。

.image {
    visibility: hidden;
}

尽管图像不可见，但仍然会占用空间，从而保持您的布局不会崩溃。当然不会显示图像边框，但我猜你这样做只是为了在隐藏图像后保留折叠布局。

Answer 2

如果服务器上的URL为“images / opaque.gif”的1x1像素，则可以执行以下操作：

var theImage = $('img');
theImage
    .css({width: theImage.width(), height: theImage.height()})
    .attr('src', 'images/opaque.gif');

设置宽度和高度是必要的，因此图像不会调整为1x1。

Answer 3

将图像放入容器中并将其居中以模仿图像的边框。然后根据需要淡出图片（此处opacity属性完全正常）或将其visibility属性设置为hidden。

这适用于任何类型的图像，只是不要为容器设置宽度和高度。使用padding来获得所需的边框。

Answer 4

简单的方法包括将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'));

如何用相同大小的矩形替换图像

4 个答案: