javascript - 预加载图像？

Question

我一直在研究 Preloading images with JQuery 并遇到了这个Preloading images with jQuery

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

有人可以在这里澄清吗？

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

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

使用 jQuery 预加载图像

Answer 2

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

Answer 3

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

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

这只是使用的一种方法:before，因此有浏览器支持限制（< IE8）。这个的好处是你不需要任何额外的 HTML 标记。

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;
}

Answer 4

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

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);
    });
}