javascript - JQuery - 预加载图像(使用 JQuery/原生 JavaScript/CSS)

Question

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

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

Answer 1

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

使用JQuery

function preloadImg(src) {
    $('<img/>')[0].src = src;
}

preloadImg('http://yoururl/to/the/picture.jpg');

<小时/>

或 native 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 { 显示:无； }

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>