Javascript 在不应用CSS的情况下预加载CSS的最简单方法是什么？问题_Javascript_Css_Twitter Bootstrap 3_Background Image_Preload

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

javascript css twitter-bootstrap-3

Javascript 在不应用CSS的情况下预加载CSS的最简单方法是什么？问题,javascript,css,twitter-bootstrap-3,background-image,preload,Javascript,Css,Twitter Bootstrap 3,Background Image,Preload,我制作了一个包含多个不同页面的bootstrap3.2.0站点。每一个不同的页面都有它自己的，全身的背景图片。我现在采用了最简单的方法，为每个页面制作不同的CSS文件bodyCSsforDisplay.CSSbodycssforDisplay.css仅包含以下代码，然后覆盖引导原始的正文定义： html,body { height:100%; background-color: #333; background-image: url(../img/bg-image.jpg

我制作了一个包含多个不同页面的bootstrap3.2.0站点。每一个不同的页面都有它自己的，全身的背景图片。我现在采用了最简单的方法，为每个页面制作不同的CSS文件

bodyCSsforDisplay.CSS

bodycssforDisplay.css

仅包含以下代码，然后覆盖引导原始的正文定义：

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>

使用这种方法的问题这将是一个简单的解决方案，但它包含许多不同的

.css文件

。预加载5-10个CSS文件应该在页面底部完成，这样页面本身就可以顺利加载（就像Bootstrap中的许多其他脚本一样）

据我所知（如果我错了，请更正），预加载整个CSS文件（即通过JavaScript）可能会导致级联样式相互覆盖，因此页面将使用最底层的CSS文件数据（在我的情况下为bg图像等）

在我看来，仅仅为了更改背景图像而预加载许多不同的CSS文件不是很方便

解决方案2：为每个html/body元素指定一个具有不同bg图像的类为每个页面提供自己的类，如下所示：

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

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

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

使用这种方法的问题如果图像较大且数量较多，则会显著影响

index.html

加载时间，因为它将首先加载

.css文件

中提到的所有图像（如您所知，.css的代码位于和标记之间的页面顶部）

问题最好的方法是什么：

a）使用一些时髦的预加载功能更改不同页面的背景图像（注意，bg图像必须在正文中，因为我的站点中有一些fadeloader.js内容），并且

b）那么，有没有更好的方法来做到这一点，为每个网站和网站创建

thispagesbg image.css

文件

c）请随意想出你自己的想法来做这件事

解决方案更倾向于使用Javascript、jQuery或css的一些混合体（或者最适合高效完成此任务的东西）来完成

经过两个小时的谷歌搜索，我什么也没想到。我发现了这个，但我认为它在加载我的页面之前加载了所有内容

编辑：临时修复现在，我已经在

mypagescustomcs.css

上为每个页面的

创建了类（并根据需要复制它）：

然后我将以下图像预加载JavaScript放在

index.html

的底部，就在

标记

之前：

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


$（窗口）.on（'load'，function（）{
if（document.images）{
img1=新图像（）；
img1.src=“img/bg-for-page1.jpg”；
img2=新图像（）；
img2.src=“img/bg-for-page2.jpg”；
}
});

现在就这样吧！正如我前面提到的，我通过iPhone4和慢速3G连接使用此页面，因此预加载至关重要

我仍然遇到一些问题，我的网站，因为它滞后了很多。也许我应该调整这些超大图像的大小，然后再试一次。试试看：

您可以将所有单独的CSS背景放在一个CSS文件中，供整个站点使用

给每个背景设置一个类选择器。比如：

CSS

然后在开头为每页指定一个相应的类

：

HTML

通过这种方式，您的CSS已被缓存以备使用。

解决方案2在我看来很好，因为您不需要创建多个CSS文件，而且在第一次请求时将被缓存。不过需要澄清的是，这里只下载页面上使用的css类的图像

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

jQuery文件（代码）

替换此项：

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

与：

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

删除

html

将使该类适用于用于预加载图像的

div

。

我已经想到了这一点，但考虑到我的网站很可能仅由moblie技术（iPhone等）使用，首次加载时间相当长，因为在单个CSS文件中有5-10 mb的图片。您上面描述的想法是从CSS文件加载所有图像，还是只加载当前页面需要的图像？然后，它再一次破坏了预加载的整个想法，而事实并非如此。我使用了一个很好的预加载脚本，但它只用于图片…如果我将图像预加载程序放在页面底部，然后只更改每个页面的bodybgimage.css，这对页面加载时间有重大影响吗？tml正在使用jQuery fadeloader，它为用户提供了3-5秒宝贵的加载时间。也知道，没有人点击一个链接立即给一些时间来加载下一页bg图像…使用这种方法，您只加载一个图像的初始页面加载。与类匹配的背景图像：

。加载页面后，您可以预加载其余的背景图像，以加快稍后的加载时间。您可以最大限度地优化的一件事是压缩背景图像。通过加载优化的ima，您可以更进一步

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

<html class="backgroundOne">

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

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

div#preloader { display : none; }

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

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