Html 更改图像而不更改源

有可能吗

我的网页上有以下代码

（abc.png有一个黑色箭头，def.png有相同的白色图像）

这在离线状态下运行良好。但是如果我把它放在网上，加载第二张图片需要时间，同时这个区域是空白的，看起来很糟糕

所以我可以在不改变源的情况下改变图像中箭头的颜色吗？？或者我可以做点什么来加快这个过程？？有人能帮我吗？？非常感谢您的帮助

加载另一个带有“display:none”和第二幅图像的img标签

而不是替换源。图像已被缓存

您甚至可以稍后删除img标记。

尝试使用此代码

$("img.imgchange").mouseover(function(){
   $(this).attr("src","def.png");
});


$("img.imgchange").mouseout(function(){
   $(this).attr("src","def.png");
});

要在加载图像时删除空白，请对图像标记使用背景图像，如下所示

<img src="abc.png" style="background-image:url('loading.gif');" class="imgchange" height=500 onmouseover="this.src='def.png'" onmouseout="this.src='abc.png'">

---

对于鼠标输入，使用函数

mouseenter（）

显示图像，并将其包装在与图像尺寸相同的DIV中。在DIV上添加背景图像。当访问者加载你的网页时，背景图像和图像都将被加载，但他们不会看到背景图像，因为它被图像覆盖。当你想显示另一个图像时，隐藏图像，他们就会看到一直存在的背景图像。如果图像具有alpha通道，则需要将图像嵌套两个级别，将背景图像放置在最外层的div上，将背景颜色放置在最内层的div上

<div width="200" height="200" style="background:url('http://www.placehold.it/200/200/cccccc') no-repeat center;">
    <div width="200" height="200" bgcolor="#ffffff"><!-- hide this div to display the background image -->
        <img src="http://www.placehold.it/200/200/aaaaaa' alt="Transparent png image" />
    </div>
</div>

---

如果图像只是箭头或任何可以很容易成为矢量的形状，我更喜欢做的是用我常用的图标创建字形，并将它们作为附加字符附加到我已经在网站上包含的web字体中。这是非常容易做到这一点，这是可用于OSX或Windows。FontLab不是免费的，但是如果你想要一个免费的替代品，OSX或Windows也可以使用，我也使用过，它和FontLab一样好，但是要设置它需要一点过程

使它们成为字形的好处是，它们的操作变得非常灵活，并提供了最高级别的优化。在已经包含的字体文件中添加一些字形意味着它们的大小最多不超过两个字节，并且作为字体字符，您可以像调整任何文本内容一样轻松地调整它们的大小、颜色和位置

当然，如果您还没有web字体，那么这不是一个可行的解决方案，因为仅仅为了这种效果而添加web字体会抵消优化带来的好处，并且不值得您失去的兼容性。在某种程度上，Web字体的交叉兼容性不如使用图像。减少这种情况的一种方法是确保您拥有适当的字体堆栈，其中包含每个浏览器支持的变体

---

---

如果你不想自己做这件事，我相信网上有免费的服务可以让你把图标转换成字形。虽然我不能就质量水平发言，因为我总是自己做。搜索中出现的第一个问题是

您不能直接使用onmouseover请使用jquery/javascript更改图像