2

我之前问过一个关于如何将鼠标悬停在小图像上并将附加图像加载到页面右侧的问题。我的一切工作正常，但现在我想预加载图像。

如何使用 JQuery 预加载图像，以便在需要时立即向用户显示（无需加载时间）？

4

3 回答 3

11

您可以很容易地预加载图像，如下所示：

使用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>
于 2013-10-31T22:35:21.290 回答
1

预加载图像的最简单方法是这样的：

function preload(selector, url) {
    $('<img/>').attr({
        src: url,
        height: '1px',
        width: '1px'
    }).appendTo($(selector)).delay(1000).remove();
}
于 2013-10-31T22:27:56.887 回答
0

我是这样做的。

我查找了任何悬停状态图像，然后通过将 -nm （正常）替换为 -hv （悬停）来预加载悬停状态

这样做的好处是没有 URL 的硬编码

$(function() {
        $(this).find("img[src*='-nm']").each(function () {
           $('<img/>')[0].src = this.src.replace(/-nm/, "-hv");
        });
})
于 2015-08-27T15:29:50.583 回答