javascript - onmouseover 需要时间来显示图像

Question

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].'"  />

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

Answer 1

这个问题很可能是资源加载延迟造成的。为解决此问题，您可以通过使用类似以下内容的 JavaScript 加载图像来将图像缓存在 URL 中:

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

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

如果图像不是动态的，您还可以使用 CSS 预加载它们。可以在此处找到有关此的更多信息:CSS3 image preloading