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

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

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

最佳答案

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

使用 JQuery

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

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

或本机Java脚本

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>

关于javascript - jQuery-预加载图像(使用jQuery/ native JavaScript/CSS)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19717611/