-
-
Save mathiasbynens/375496 to your computer and use it in GitHub Desktop.
| /*! | |
| * $.preload() function for jQuery – http://mths.be/preload | |
| * Preload images, CSS and JavaScript files without executing them | |
| * Script by Stoyan Stefanov – http://www.phpied.com/preload-cssjavascript-without-execution/ | |
| * Slightly rewritten by Mathias Bynens – http://mathiasbynens.be/ | |
| * Note that since this script relies on jQuery, the preloading process will not start until jQuery has finished loading. | |
| */ | |
| jQuery.preload = function(array) { | |
| var length = array.length, | |
| document = window.document, | |
| body = document.body, | |
| isIE = 'fileSize' in document, | |
| object; | |
| while (length--) { | |
| if (isIE) { | |
| new Image().src = array[length]; | |
| continue; | |
| } | |
| object = document.createElement('object'); | |
| object.data = array[length]; | |
| object.width = object.height = 0; | |
| body.appendChild(object); | |
| } | |
| }; | |
| // Example: | |
| $(function() { | |
| $.preload([ | |
| 'http://hang.nodester.com/foo.png?2000', | |
| 'http://hang.nodester.com/foo.js?2000', | |
| 'http://hang.nodester.com/foo.css?2000' | |
| ]); | |
| }); |
| /*! | |
| * JavaScript preload() function – http://mths.be/preload | |
| * Preload images, CSS and JavaScript files without executing them | |
| * Script by Stoyan Stefanov – http://www.phpied.com/preload-cssjavascript-without-execution/ | |
| * Slightly rewritten by Mathias Bynens – http://mathiasbynens.be/ | |
| */ | |
| function preload(array) { | |
| var length = array.length, | |
| document = window.document, | |
| body = document.body, | |
| isIE = 'fileSize' in document, | |
| object; | |
| while (length--) { | |
| if (isIE) { | |
| new Image().src = array[length]; | |
| continue; | |
| } | |
| object = document.createElement('object'); | |
| object.data = array[length]; | |
| object.width = object.height = 0; | |
| body.appendChild(object); | |
| } | |
| } | |
| // Example: | |
| preload([ | |
| 'http://hang.nodester.com/foo.png?2000', | |
| 'http://hang.nodester.com/foo.js?2000', | |
| 'http://hang.nodester.com/foo.css?2000' | |
| ]); |
@kitcambridge I’ll defer to Stoyan’s post: http://www.phpied.com/preload-cssjavascript-without-execution/
Note that I basically just rewrote his script a little bit.
@mathiasbynens Hmm, I wonder if the browser sniff for IE can be replaced with a weak object inference...maybe isIE = 'fileSize' in document? It doesn't look as though we can feature test for it, but I think a weak inference is slightly more reliable than a sniff.
@kitcambridge Great suggestion, thanks!
@mathiasbynens Certainly. Looks great!
@mathiasbynens It seems that I was right that the objects will take up height in a body { height: 100%; } -scenario (ie. sticky css footer - http://ryanfait.com/sticky-footer/). Will make a demo tonight hopefully. /Michael
@mathiasbynens - as promised: http://moredots.dk/etc/preloader-bug-demo/ - issue encountered in newest version of Chrome, Firefox, Safari and Opera. Adding o.style.position = 'absolute' will fix it. /Michael
@mathiasbynens Out of curiosity, why doesn't the
objectfork work in IE?