onmouseover 需要时间来显示图像答案

【问题标题】：on onmouseover taking time to display imageonmouseover 需要时间来显示图像
【发布时间】：2023-03-22 05:55:01
【问题描述】：

OnMouseover 图像我来自自定义元框，OnMouseout 图像是特色图像。

这是我的代码：

$image_full = wp_get_attachment_image_src(get_post_thumbnail_id($postid), 'full');
$him = $post_meta['_hover_image'];
<img onmouseover="this.src=\'' .$him[0]. '\'"
     onmouseout="this.src=\''.$image_full[0].'\'" src="'.$image_full[0].'"  />

一切正常，但显示图像需要时间。

【问题讨论】：

如果您希望图像在翻转时加载得更快，请缓存您的图像。如何利用浏览器缓存：varvy.com/pagespeed/leverage-browser-caching.html

标签： javascript php wordpress

【解决方案1】：

这个问题很可能是由于加载资源的延迟造成的。为了解决这个问题，您可以通过在 JavaScript 中加载图像来将图像缓存在 URL 中，如下所示：

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

preloadImage($him[0]);
preloadImage($image_full[0]);

如果图像不是动态的，您也可以使用 CSS 预加载它们。更多信息可以在这里找到：CSS3 image preloading

【讨论】：