Question

我希望能够预先加载图片，样式表和脚本，以便加快整个网站的加载时间，此外还没有让用户在他们面前看到图像加载。我想知道最有效的方法是什么？

在每个页面上放置应该预加载图像和样式表的代码是否有意义？换句话说，我已经复制了预加载代码。

预加载代码的位置，页面顶部，底部是否重要？

任何见解肯定会受到赞赏。这是我的代码：

<script type="text/javascript">
window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/pages.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/slider.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/responsive.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/footer-home.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/footer-main.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/contact.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/3eblog.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/index.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/submit.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'submit.html');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'css/bootstrap.css');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/jquery.cslider.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/one.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/two.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/three.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/four.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/five.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'js/modernizr.custom.28468.js');
        xhr.send('');
        // preload image
        new Image().src = "images/3elements-issue-1-fall-2013.png";
        new Image().src = "images/3elements-issue-1-fall-2013-current.png";
        new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013.swf";
        new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013.pdf";
        new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013-mobile.pdf";
        new Image().src = "images/mikaela.jpg";
        new Image().src = "images/carol.jpg";
        new Image().src = "images/parker.jpg";
        new Image().src = "images/kids.jpg";
        new Image().src = "images/kids2.jpg";
        new Image().src = "images/kids3.jpg";
        new Image().src = "images/kids4.jpg";
        new Image().src = "images/kids5.jpg";
        new Image().src = "images/kids6.jpg";
        new Image().src = "images/kids7.jpg";
        new Image().src = "images/kids8.jpg";
        new Image().src = "images/kids9.jpg";
        new Image().src = "images/alert.svg";
        new Image().src = "images/3elm.svg";
        new Image().src = "images/drop-down-selector.svg";
        new Image().src = "images/arrow-selector.svg";
        new Image().src = "images/book.svg";
        new Image().src = "images/facebook.svg";
        new Image().src = "images/light-bulb.svg";
        new Image().src = "images/logo.svg";
        new Image().src = "images/logo-2.svg";
        new Image().src = "images/logo-2-denied-page.png";
        new Image().src = "images/mug.svg";
        new Image().src = "images/notepad.svg";
        new Image().src = "images/stumble.svg";
        new Image().src = "images/twitter.svg";
        new Image().src = "images/google-plus.svg";
        new Image().src = "images/favi.ico";
        new Image().src = "fonts/gotham-light.ttf";
        new Image().src = "fonts/gotham-light.otf";
        new Image().src = "fonts/gotham-medium.ttf";
        new Image().src = "fonts/gotham-medium.otf";
        new Image().src = "fonts/gotham-book.ttf";
        new Image().src = "fonts/gotham-book.otf";
        new Image().src = "fonts/gotham-bold.ttf";
        new Image().src = "fonts/gotham-bold.ttf";
        new Image().src = "fonts/pts.ttf";
        new Image().src = "fonts/pts.otf";
        new Image().src = "fonts/pts.woff";
    }, 1000);
};
</script>

Answer 1

“.. in order to speed up load time throughout my site, in addition to not having a user see an image load right before them”

这些要求相互矛盾。用户在他之前看到加载的图像，因为页面在加载图像之前显示。

预加载不会加快加载速度。如果在初始页面查看之前预加载所有图像，则初始页面视图会变慢。预加载对于稍后要显示的图像尤其有用，例如悬停时的（不同）背景图像。虽然精灵通常是更好的选择。预装css对我来说似乎毫无用处。

如果要加快初始页面加载速度，请使用CDN。您甚至可以为同一服务器创建多个域或子域。这允许浏览器一次下载更多文件。大多数浏览器都有一个限制，允许它们只从同一台服务器同时下载2个文件。通过设置多个域或子域，您可以诱使浏览器认为有多个服务器。当然，您的服务器必须足够强大并且有足够的带宽来支持额外的请求，否则它将无济于事。

除此之外，如果您希望它能够工作，您现在需要在每个页面上提供代码。您现在永远不会将哪个页面作为输入页面。如果要预加载完全相同的文件，可以将此代码放在单独的脚本文件中，以便进行缓存，从而节省了每个访问过的页面的加载时间。

如果您愿意，可以在预先加载所有图像时设置cookie，因此每次会话只能执行一次。

代码本身最好放在页面底部。这样可以显示页面，而这个脚本本身仍在运行，虽然它并不重要，因为它会非常快（它只设置一个计时器）。

Answer 2

我认为没有任何意义。浏览器在加载所有内容后文件onload事件，因此解决方案是执行类似

的操作

window.onload = function() {document.body.style.display = "block"};

具有正文的内联样式：

<body style="display:none"> ... </body>

Answer 3

无论如何你必须加载图像。对于“预加载”，我猜你的意思是你只想在它们被加载时淡化它们。

您可以在图像上方分层div并在图像加载时将其淡出。

$('img').on('load', function() {
    $('yourImageHidingDiv').fadeOut();
});

Answer 4

最好的方法是使用带有小GIF的图像支架作为背景，一旦图像被加载，只需删除背景。

$(document).ready(function(){

$("#loading").hide()
}

并且#loading背景图片应该是这样的： http://jimpunk.net/Loading/wp-content/uploads/loading1.gif

预加载图像和样式表的最有效方法是什么？

4 个答案: