预加载图片？

我一直在研究使用JQuery预加载图像，并使用jQuery遇到了这个预加载图像

现在可以有人告诉我，我是否必须以任何方式调用预装的图像？ 我假设这创建了一个img然后浏览器缓存了它（至少对于那个页面）我只是通过它的URI使用预加载的图像？

有人可以澄清一下吗？

Answer 1

可以使用一行简单的JavaScript来预加载图像：

 new Image().src='image.png'; 

要预加载JavaScript文件，请使用JavaScript include_DOM技术并创建一个新文件

标签，如下所示：

 var js = document.createElement('script'); js.src = 'mysftuff.js'; document.getElementsByTagName('head')[0].appendChild(js); 

这是CSS版本：

 var css = document.createElement('link'); css.href = 'mystyle.css'; css.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(css); 

在第一个示例中，请求但从未使用过图像，因此它不会影响当前页面。 在第二个示例中，脚本被添加到页面中，因此在下载时，它将被解析并执行。 CSS也是如此 - 它也将应用于页面。 如果这是不合需要的，您仍然可以使用XMLHttpRequest预加载资产。

有关“ 让您的网站超高速 ”的完整教程，请访问我从许多网站和博客中挑选的以下链接

使用jQuery预加载图像

Answer 2

如果服务器设置了正确的缓存标头，则应该缓存图像，您应该只需使用URL即可立即获取图像。

Answer 3

您可以使用以下方式预加载所有图像：

 function loadImages(){ var images = [ 'http://sofzh.miximages.com/javascript/image1.png', 'http://sofzh.miximages.com/javascript/image2.jpg', 'http://sofzh.miximages.com/javascript/image3.jpg', 'http://sofzh.miximages.com/javascript/image4.jpg' ]; $(images).each(function() { var image = $('').attr('src', this); }); } 

Answer 4

我只使用CSS预加载了很多。 我不喜欢jQuery版本，因为你必须等待首先加载库，如果它们没有启用JS，或者jQuery被延迟，它们在翻转时会有明显的图像更改延迟。

如果在图像完成预加载时需要回调，请使用JS / jQuery。 否则，请使用CSS。

这只是一种使用的方法:before ，浏览器支持限制（

HTML

CSS

 .logo { background:url(logo-1.png); } .logo:before { content: url(logo-2.png); width: 0; height: 0; visibility: hidden; } 

另一种方法是简单地将背景图像设置为页面上隐藏的元素，并使用您需要预加载的图像。

HTML

CSS

 #preload-logo-2 { background: url(logo-2.png); height: 0; width: 0; visibility: hidden; }