预加载图像？答案

【问题标题】：Preload Images?预加载图像？
【发布时间】：2011-12-14 12:48:53
【问题描述】：

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

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

有人可以在这里澄清一下吗？

【问题讨论】：

是的，没错。缓存由 URL 管理。
好的，所以我调用preload 函数，然后执行$(this).children('img').attr('src', 'http://domain.com/images/icons/rss-12.png'); 之类的操作，然后因为它已被预加载，浏览器使用缓存？
非常感谢。这有很大帮助，我终于摆脱了悬停延迟。

标签： javascript jquery preloading

【解决方案1】：

只需一行简单的 JavaScript 即可预加载图像：

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

为了预加载 JavaScript 文件，使用 JavaScript include_DOM 技术并创建一个新的

<script> 标签，像这样：

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 预加载资产。

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

Preloading images with jQuery

【讨论】：

【解决方案2】：

如果服务器设置了正确的缓存头，图像应该被缓存，你应该能够只使用 URL 并立即获取图像。

【讨论】：

好的，服务器我假设你是指我的托管服务器（空间）？
@SeanHJenkins 是的。如果您使用一些通用托管并将图像作为静态文件提供，则标题几乎总是或多或少正确设置。如果您使用 PHP 脚本或类似脚本动态生成或服务器图像等，您可能需要手动设置标头。无论如何，您可能已经正确设置了所有内容。

【解决方案3】：

您可以使用以下方法预加载所有图片：

function loadImages(){
    var images = [
        'http://cdn.yourdomain.com/img/image1.png',
        'http://cdn.yourdomain.com/img/image2.jpg',
        'http://cdn.yourdomain.com/img/image3.jpg',
        'http://cdn.yourdomain.com/img/image4.jpg'
    ];
    $(images).each(function() {
        var image = $('<img />').attr('src', this);
    });
}

【讨论】：

【解决方案4】：

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

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

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

HTML

<div class="logo"></div>

CSS

.logo {
    background:url(logo-1.png);
}

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

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

HTML

<div id="preload-logo-2"></div>

CSS

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

【讨论】：