在不应用CSS的情况下预加载CSS的最简单方法是什么？

时间：2014-08-09 11:55:29

标签： javascript css twitter-bootstrap-3 background-image preload

问题

我创建了一个包含多个不同页面的 Bootstrap 3.2.0 网站。每个不同的页面都有自己的全身背景图像。我现在已经走了最简单的路线，为每个页面制作不同的CSS文件bodycssforthispage.css。 bodycssforthispage.css仅包含以下代码，然后覆盖Bootstraps原始正文定义：

html,body {
    height:100%;
    background-color: #333;
    background-image: url(../img/bg-image.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
}

现在我想要做的是预加载所有其他网站相关的CSS文件，这样当我从index.html转到page1.html时，所有都需要的文件（CSS-已经预先加载到浏览器缓存的背景和图像文件，并且转换到下一页是顺利的。重要的是要注意，我想要预加载整个CSS文件及其内容。

解决方案1：预加载所有图像并为每个页面使用不同的.css

我可以通过将这个简单的代码放在索引页的底部来预加载JavaScript所需的所有图像：

<script type="text/javascript">
if (document.images) {
    img1 = new Image();
    img1.src = "img/bg1.jpg";
    img2 = new Image();
    img2.src = "img/bg2.jpg";
}
</script>
</body>
</html>

然后只为每个不同的页面创建bgforthisandthatpage.css，仅包含：

html,body {
    height:100%;
    background-color: #777;
    background-image: url(../img/bg-imageforthispage.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
}

使用这种方式的问题

这将是一个简单的解决方案，但它包含许多不同的.css-files。预加载5-10个CSS文件应该在页面底部完成，这样页面本身就可以顺利加载（就像在带有许多其他脚本的Bootstrap中一样）。

据我所知（正确，如果我错了）预加载整个CSS文件（即通过JavaScript）可能会导致级联样式相互覆盖，这样页面就会使用最底层的CSS文件（s）数据（在我的情况下是bg-image等）。

在我看来，仅为变化的背景图像预加载许多不同的CSS文件并不方便。

解决方案2：为每个html / body元素提供不同的bg-image

为每个页面赋予它自己的类：

<html class="contactpage-bg-image">

然后为每个页面创建自己的类到原始的css文件中，如下所示：

html.contactpage-bg-image {
    /* styling */
}

html.indexpage-bg-image {
    /* styling */
}

使用这种方式的问题

如果图片尺寸较大且图片很多，则会对index.html加载时间产生很大影响，因为它会加载.css file中提到的所有图片（如您所知， .css的代码位于页面顶部和标签之间。）

问题

最好的方法是：

a）使用一些时髦的预加载功能更改不同页面的背景图像（请注意，bg-image 已在主体中，因为我的网站中有一些fadeloader.js内容），以及;

b）有没有更好的方法可以为每个网站制作thispagesbg-image.css文件;

c）随意提出自己的想法来做到这一点！

解决方案更适合在Javascript，jQuery或与css的某些混合（或者最适合最有效地完成此任务）中完成。

经过2个小时的理解谷歌搜索后，我只想出了什么。我发现了这个Pre-loading external files (CSS, JavaScript) for other pages，但我认为这会在我的页面加载之前加载所有内容。

编辑：暂时修复

我现在为<html>上的每个页面mypagesCustomCSS.css创建了一个类（并根据需要复制它）：

html.page1ClassH, html.page1ClassHere body {
    background-image:url(../img/bg-for-page1.jpg);
}

html.page2ClassHere, html.page2ClassHere body {
    background-image:url(../img/bg-for-page2.jpg);
}

然后我在index.html之前将图片预加载 JavaScript放在</body> tag的底部：

<script>
$(window).on('load', function() { 
   if (document.images) {
    img1 = new Image();
    img1.src = "img/bg-for-page1.jpg";
    img2 = new Image();
    img2.src = "img/bg-for-page2.jpg";
}
});
</script>

这就是现在的诀窍！正如我之前提到的，我通过iPhone 4使用此页面并缓慢连接3G，因此预加载至关重要。

我的网站仍然遇到一些问题，因为它滞后很多。也许我应该调整那些超大尺寸的图像，然后再试一次。试试：http://www.kolumbus.fi/~g636221/jano/index.html

2 个答案:

答案 0 :(得分：2)

解决方案2看起来不错，因为您不需要创建多个css文件+将在第一个请求时缓存。但有一点澄清，只有页面上使用的css类的图像才会在这里下载。

所以现在，唯一的任务仍然是为用户即将浏览的其他页面预加载资源。为此，您可以创建一个javascript文件或jQuery代码，在完全加载当前页面后下载资源。

jQuery文件（代码） 

var pages = ["class1", "class2", "class3"]; //Declare all pages here
window.onload = windowloaded();
function windowloaded()
{
    for(i=0; i < pages.length; i++)
     {
          $("div#preloader").append("<div class='" + pages[i] + "'></div>"); //This will load all other resources automatically as css classes are already present on the current page.
     }
}

HTML代码（在页面的任何位置添加到所有页面。这仍然不可见，并负责预加载其他页面的资源。） 

<div id="preloader"></div>

CSS修改（所有网页的单个CSS） 

div#preloader { display : none; }

替换它：

html.contactpage-bg-image {
    /* styling */ 
}

with：

.contactpage-bg-image {
    /* styling */
}

删除html会使该课程适用于div，用于预加载图片。

答案 1 :(得分：0)

您可以将所有单独的CSS背景放入整个网站中使用的单个CSS文件中。

为每个背景提供一个类选择器。类似的东西：

CSS 

html.backgroundOne, html.backgroundOne body {
    /*styles*/
}
html.backgroundTwo, html.backgroundTwo body {
    /*styles*/
}

然后在开头<html>上为每个页面提供相应的课程：

HTML 

<html class="backgroundOne">

这样你的CSS就已经可以缓存了。

相关问题
最新问题