JQuery - 预加载图像(使用 JQuery / native JavaScript / CSS)

Question

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

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

Answer 1

您可以非常轻松地预加载图像，如下所示：

使用 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>

Answer 2

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

function preload(selector, url) {
    $('<img/>').attr({
        src: url,
        height: '1px',
        width: '1px'
    }).appendTo($(selector)).delay(1000).remove();
}

Answer 3

我是这样做的。

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

这样做的美妙之处在于没有URL的硬编码

$(function() {
        $(this).find("img[src*='-nm']").each(function () {
           $('<img/>')[0].src = this.src.replace(/-nm/, "-hv");
        });
})