我之前问过一个关于如何将鼠标悬停在小图像上并将附加图像加载到页面右侧的问题。我一切正常，但现在我想预加载图片。
如何使用 JQuery 预加载图像，以便在需要时立即向用户显示（无需加载时间）？
【问题讨论】：
标签： javascript jquery css image preloading
您可以很容易地预加载图像，如下所示：
使用 JQuery
function preloadImg(src) {
$('<img/>')[0].src = src;
}
preloadImg('http://yoururl/to/the/picture.jpg');
或原生Javascript
function preloadImg(src) {
var img = new Image();
img.src = src;
}
preloadImg('http://yoururl/to/the/picture.jpg');
或使用 CSS（无需 JavaScript）
您还可以使用 CSS（和 HTML）预加载图像
CSS：
div#preload { display: none; }
HTML：
<div id="preload">
<img src="http://yoururl/to/the/picture1.jpg" width="1" height="1" alt="Image 1" />
<img src="http://yoururl/to/the/picture2.jpg" width="1" height="1" alt="Image 2" />
<img src="http://yoururl/to/the/picture3.jpg" width="1" height="1" alt="Image 3" />
</div>
【讨论】：
预加载图像的最简单方法是这样的：
function preload(selector, url) {
$('<img/>').attr({
src: url,
height: '1px',
width: '1px'
}).appendTo($(selector)).delay(1000).remove();
}
【讨论】：
我是这样做的。
我查找了任何悬停状态图像，然后通过将 -nm（正常）替换为 -hv（悬停）来预加载悬停状态
这样做的好处在于没有对 URL 进行硬编码
$(function() {
$(this).find("img[src*='-nm']").each(function () {
$('<img/>')[0].src = this.src.replace(/-nm/, "-hv");
});
})
【讨论】：