JQuery - 预加载图像（使用 JQuery / 本机 JavaScript / CSS）

Posted 2023-05-07

【中文标题】JQuery - 预加载图像（使用 JQuery / 本机 JavaScript / CSS）

【英文标题】：JQuery - Preload Images (using JQuery / native JavaScript / CSS)

【发布时间】：2013-11-12 02:43:44

【问题描述】：

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

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

【问题讨论】：

这几乎是一个重复的问题。无需 jQuery 预加载图像。在这里进行简单的搜索，您会发现有关该主题的数十篇文章。这是一个甚至会在它们全部加载后给您回电：Image preloader javascript that supports events

【参考方案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"    />
   <img src="http://yoururl/to/the/picture2.jpg"    />
   <img src="http://yoururl/to/the/picture3.jpg"    />
</div>

【讨论】：

所以，我会替换 preloadImg('yoururl/to/the/picture.jpg');与我使用的每张图片的网址？这将如何改变我调用 .hover 的方式？

基本上是的。你能解释一下你到底想做什么吗？

感谢您回复我。正如你在上面看到的，我有一个 html 表。在一个

中，我有一个播放器的小图像。剩余的单元格包含有关该玩家的信息。在 img 悬停时，播放器的另一个较大的 img 会出现在右侧。我已经弄清楚了那部分。所以接下来我要教自己的是如何预加载这些 imgs。我已经看到了几种预加载 img 的方法，但是对于我为每个玩家有 2 个不同的 img 的方式有点迷失，一个直到悬停才显示（总共 46 个 img），并在悬停时调用它们。我希望这有助于弄清楚我想弄清楚的事情。

您可以通过迭代它们并为每个图像调用 preloadImg 来预加载所有较大的图像。然后浏览器缓存这些图像。当用户悬停小图像时，您只需创建一个图像标签（src=大图像 url）并将其附加到单元格中。或者，您可以在相应的单元格中插入所有图像并使用 css（或 js）隐藏它们。然后在悬停时你只需要改变可见性。我就是这样做的。

据我所知，除了 Safari（版本 7.0.1 (9537.73.11)、Mac OS X 10.9.1）之外，这在任何地方都可以使用。有任何想法吗？谁能确认一下？

【参考方案2】：

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

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

【参考方案3】：

我是这样做的。

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

这样做的好处在于没有对 URL 进行硬编码

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