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

我不确定你的第一个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 2

我不确定但您可以尝试将div的样式上的显示值更改为内联块

Answer 3

src不是“空白”，它是解析为当前文档的URI的相对URI，因为它是HTML文档，它不是图像，因此会抛出错误。

根据浏览器的不同，它可能生成也可能不生成您为无效图像指定的大小的框。

解决方案是不将图像插入到DOM（通过HTML或JS）中，这些DOM没有包含实际图像的URI的src属性。

我尝试将图像封装在固定宽度的div（如此）中也无济于事，div的宽度也不能保持固定。

您已将div元素显式设置为display: inline。 width property不适用于内联元素。

当src为空时，无法设置IMG宽度？

3 个答案: