-
-
Save gruber76/1348725 to your computer and use it in GitHub Desktop.
Delays the background image displaying until loaded. After loaded it will then fade out the overlay to display the background image. This is used for larger image file sizes. This code represents a proof of concept.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #bg-overlay { | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| width: 100%; | |
| background-color: #444; /* What ever you want to the default background to look like before the image is displayed */ | |
| z-index: -1; | |
| } | |
| .bg-img { | |
| background-image: url('http://www.location/of/really/big/image.jpg'); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <!-- This overlay should be at the top --> | |
| <div id="bg-overlay"> | |
| <!-- Temporary background overlay until image is downloaded --> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // requires: Modernizr, jQuery, and the jQuery cookie plugin | |
| // allow this object to be global and placed in the root/base template | |
| var gBackground = (function() { | |
| // if the background image has been previously loaded, just remove overlay and apply image | |
| function checkImgCookie() { | |
| if($.cookie('bgImageLoaded')) { | |
| $('body').addClass('bg-img'); | |
| $('#bg-overlay').remove(); | |
| } | |
| } | |
| // call this (gBackground.loadBgImg()) on each page when you want it to start loading | |
| // recommend putting this in document ready. | |
| function loadBgImg() { | |
| if($.cookie('bgImageLoaded') || $('body').hasClass('bg-img')) return; | |
| Modernizr.load({ | |
| load:"http://www.location/of/really/big/image.jpg", | |
| complete: function() { | |
| $('body').addClass('bg-img'); | |
| $('#bg-overlay').fadeOut(4000, function() {$(this).remove();}); | |
| $.cookie('bgImageLoaded', true, {expires: 7, path:'/'}); | |
| } | |
| }); | |
| } | |
| return {loadBgImg: loadBgImg, checkImgCache: checkImgCookie}; | |
| })(); | |
| gBackground.checkImgCache(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment