Ширина IMG не может быть установлена, когда src пуст?

Question

У меня проблема с тем, что мое второе изображение появляется в том месте, где должно появиться мое первое изображение, что вызывает эффект мерцания (от позиционирования), когда первое изображение действительно существует. Я думал, что это будет очень просто, поэтому я хотел бы получить образование по этому вопросу.

Мой HTML

<img id="image1" src="" width="32"/>
<img id="image2" src="" width="32"/>

Мой JQuery

$(function(){
    //$('#image1').attr('src','http://www.w3schools.com/html/smiley.gif');
    $('#image2').attr('src','http://www.w3schools.com/html/smiley.gif');
});

Я пытался инкапсулировать изображения в div с фиксированной шириной (например, так), но безрезультатно, что ширина div тоже не остается фиксированной.

<div style="width: 32px; display: inline;"><img id="image1" src="" width="32"/></div>
<div style="width: 32px; display: inline;"><img id="image2" src="" width="32"/></div>

Answer 1

Я не уверен, но вы можете попробовать изменить отображаемое значение в стиле div на inline-block

Answer 2

src не является «пустым», это относительный URI, который разрешает URI текущего документа, так как это HTML-документ, это не изображение, поэтому будет выдана ошибка.

В зависимости от браузера он может создавать или не отображать поле размера, указанного вами для недопустимого изображения.

Решение состоит в том, чтобы не вставлять изображения в DOM (через HTML или JS), которые не имеют атрибутов src, содержащих URI фактического изображения.

Я пытался инкапсулировать изображения в div с фиксированной шириной (например, так), но безрезультатно, что ширина div тоже не остается фиксированной.

Вы явно установили элементы div на display: inline. Свойство width не применяется к встроенным элементам.

Answer 3

Я не уверен, сработает ли ваш первый бит html ... независимо от того, не установлена ​​ли высота, я не уверен, выделено ли место при рендеринге экрана.

Вы можете настроить класс для отображения каждого изображения.

.holder {
     min-width:32px;
     min-height:32px;
     position:relative;
}

HTML

 <img id="image1" class="holder" src=""/>
 <img id="image2" class="holder" src=""/>

JQuery

$(function(){
    //$('#image1').attr('src','http://www.w3schools.com/html/smiley.gif');
    $('#image2').attr('src','http://www.w3schools.com/html/smiley.gif');
});