Ширина 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 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

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

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

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

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

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

Answer 2

Я не уверен, если ваш первый бит 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'); 
}); 

Answer 3

Я не уверен, но вы можете попробовать значение отображения изменений на стиль Div на встроенный блок