预载图片？

Question

我一直在研究使用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预加载资产。

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

Preloading images with jQuery

Answer 2

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

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

Answer 4

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

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

这只是一种使用:before的方法，因此浏览器支持限制（＆lt; 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;
}