Как я могу заменить изображение прямоугольником того же размера

Question

Как я могу скрыть изображение, но сохранить рамку или непрозрачный прямоугольник там, где раньше было изображение? Маскировка изображения тоже приемлема.

Это должно работать для изображений разных размеров, поэтому жесткое кодирование размера, содержащего div, и установка границы / bgcolor не сработает.

Полагаю, я мог бы подождать, пока загрузится изображение, получить его размеры, а затем установить содержащий его div на те же размеры. Есть ли более простой способ?

Answer 1

Если вы просто хотите сохранить пространство до загрузки изображения, используйте атрибут видимости CSS и установите видимость изображения на hidden.

.image {
    visibility: hidden;
}

Изображение по-прежнему будет занимать место, несмотря на то, что оно невидимо, сохраняя макет от разрушения. Конечно, никакие границы изображения не будут отображаться, но я предполагаю, что вы делаете это только для того, чтобы предотвратить разрушение макета после того, как изображение скрыто.

Answer 2

Поместите изображение в контейнер и отцентрируйте его, чтобы имитировать границу изображения. Затем потушите изображение по своему усмотрению (свойство opacity здесь вполне подходит) или установите для его свойства visibility значение hidden.

.

Это работает для любого вида изображения, только не устанавливайте ширину и высоту для контейнера. Используйте padding для достижения желаемых границ.

Answer 3

Простые методы включают установку 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'));

Answer 4

Учитывая 1x1 пиксель на вашем сервере по URL 'images / opaque.gif', вы можете сделать это:

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

Установка ширины и высоты необходима, чтобы изображение не изменялось до 1x1.