Question

甚至可以吗？

我的网页上有以下代码

<img src="abc.png" height=500 onmouseover="this.src='def.png'" onmouseout="this.src='abc.png'">

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

离线工作正常。但如果我把它放在网上，加载第二张图片需要时间，同时该区域是空白的，看起来非常糟糕。

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

Answer 1

使用＆＃34; display：none＆＃34;加载另一个img标记。并与第二个图像。

比替换源。图像已经缓存。

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

Answer 2

显示图像，并将其包装在与图像尺寸相同的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>

如果图像只是箭头或任何可以轻易成为矢量的形状，我更喜欢的是从我所有常用的图标中创建字形，并将它们作为附加字符附加到我自己的网络字体中。已经包括在网站上了。使用可用于OSX或Windows的FontLab Studio非常容易。 FontLab不是免费的，但是如果你想要一个免费的替代品那里也有FontForge，也可以用于OSX或Windows，我也使用它，它只是和FontLab一样好，但可以设置一些过程。

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

当然，如果您还没有网络字体，这不是一个可行的解决方案，因为仅仅针对此影响添加网络字体会抵消优化中获得的好处，并且不会值得您失去的兼容性水平。与使用图像相比，Web字体在某种程度上交叉兼容。最小化此方法的方法是确保您拥有包含每个浏览器支持的变体的正确字体堆栈。

如果您不想自己动手，我相信网上有免费服务可以让您将图标转换为字形。虽然我不能谈论质量水平，因为我总是独自完成它。搜索中出现的第一个是IcoMoon

Answer 3

尝试使用此代码......

$("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()

更改图像而不更改源

3 个答案: