预加载图片？

Question

我一直在研究使用JQuery预先加载图像，并遇到了用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

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

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

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