CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap-3background-imagepreload
Kasperi Koski
Kasperi Koski

Reputation: 81

What is the simplest method to preload CSS without applying it?

Problem

I have made a Bootstrap 3.2.0 site with multiple different pages. Every different page has it's own, whole bodywide backgrond image. I have now gone the simplest route by making different CSS-file bodycssforthispage.css for every page. bodycssforthispage.css only contains the following code, and by then overwrites Bootstraps original body definitions:

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

Now what I want to do here, is to preload all other site related CSS-files, so that when I go for example from index.html to page1.html, all the are needed files (CSS-file for background and images) are already preloaded to browsers cache, and the transition to the next page is smooth. It is important to notice, that I want to preload the whole CSS-file(s) and it's contents.

Solution 1: preload all images and use different .css for each page

I could preload all images needed with JavaScript by placing this simple code to the bottom of my index page:

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

and then just create bgforthisandthatpage.css for each different page, only containing:

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

Problems using this way

This would be the simple solution, but it includes many many different .css-files. Preloading 5-10 CSS-files should be done at the bottom of the page so, that the page itself loads smoothly (just like in Bootstrap with many other scripts).

It is come to my knowledge (correct if I'm wrong) that preloading whole CSS-files (i.e via JavaScript) may cause cascade styles to overwrite each other, so that the page would then use the most bottom CSS-file(s) data (bg-image ect. in my case).

In my opinion preloading many different CSS-files just for the changing background image is not quite convenient.

Solution 2: give every html/body element it's own class with different bg-image

Giving each page it's own class like this:

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

and then create own class for each page into the original css-file like this:

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

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

Problems using this way

If images are big-sized and there are a lot of them, it impacts dramatically to the index.html loading time, because it will fist load all images mentioned in .css file (as you know, the code to the .css is located at the top of the page between and tags).

Questions

What is the best way to:

a) Change the background image for different pages using some funky preload function (note that bg-image has to be in the body, because some fadeloader.js stuff in my site), and;

b) Is there any better way to do this then by making thispagesbg-image.css file for every single site and;

c) Feel free to come up with your own ideas to do this!

Solution would prefered to be done compleatly in Javascript, jQuery or some mixature with css (or what ever suits to do this task most efficiently).

After 2 hours of comprehensice Googling, I only came up with nothing. I found this Pre-loading external files (CSS, JavaScript) for other pages, but I think that this loads everything before my page is loaded.

EDIT: Temporarely fix

I have now created class for each page's <html> on mypagesCustomCSS.css (and copying it as much as needed):

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

and then I have placed following image preload JavaScript to the bottom of my index.html just before </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>

This does the trick for now! As I mentioned earlier, I am using this page through iPhone 4 and slow 3G connection, so the preloading is vital.

I am still experiencing some problems with my site, as it lag's a lot. Perhaps I should resize those super-sized images and try again. Have a try at: http://www.kolumbus.fi/~g636221/jano/index.html

Upvotes: 1

Views: 3244

Answers (2)

Ankit Singhania
Ankit Singhania

Reputation: 1010

Solution 2 looks good to me as you don't need to create multiple css files + will be cached on the first request. One clarification though, only the images for the css classes used on the page will be downloaded here.

So now, the only task remains is to pre-load resources for other pages user is about to browse. For this you can create a javascript file or jQuery code which downloads resources after the current page has been loaded completely.

jQuery File (Code)

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 Code (Add to all pages, anywhere on page. This remains invisible and is responsible for pre loading resources for other pages.)

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

CSS Modification (Single CSS for all pages)

div#preloader { display : none; }

Replace this :

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

with :

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

removing html will make the class applicable for div which is used for preloading the image.

Upvotes: 2

misterManSam
misterManSam

Reputation: 24692

You could place all your separate CSS backgrounds into a single CSS file that is used across your site.

Give each background a class selector. Something like:

CSS

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

Then give each page a corresponding class on the opening <html>:

HTML

<html class="backgroundOne">

This way your CSS is already cached ready for use.

Upvotes: 0

Related Questions