Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
iOS Launch Image Loader - meta tags load every image (many large files slow app load/render); this loads only appropriate image
/*
* iOS Launch Image Loader v1.1.1 @ GDibble
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Browser downloads all meta-tagged images, thus only append 1 meta tag to
* save download time and provide the fastest loading mobile experience.
*
* Files must live in '/img/ios/' and named:
* startup-2048x1496.png Landscape Retina iPads
* startup-1536x2008.png Portrait Retina iPads
* startup-1024x748.png Landscape iPad 1 & 2
* startup-768x1004.png Portrait iPad 1 & 2
* startup-1242x2148.png Portrait Retina iPhone 6+
* startup-750x1294.png Portrait Retina iPhone 6
* startup-640x1096.png Portrait Retina iPhone 5
* startup-640x920.png Portrait Retina iPhone 4
* startup-320x460.png Portrait iPhone & iPod Touch
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function () {
function dynamicLaunchImage(prefix, extension) {
var resolution;
if (navigator.platform === 'iPad') {
if (window.devicePixelRatio === 2) {
//Retina iPads
if (window.orientation === 90 || window.orientation === -90) {
resolution = '2048x1496';
} else {
resolution = '1536x2008';
}
} else {
//iPad 1 & 2
if (window.orientation === 90 || window.orientation === -90) {
resolution = '1024x748';
} else {
resolution = '768x1004';
}
}
} else if (window.devicePixelRatio === 3) {
//Retina iPhone 6+
resolution = '1242x2148';
} else if (window.devicePixelRatio === 2) {
if (window.screen.height === 667) {
//Retina iPhone 6
resolution = '750x1294';
} else if (window.screen.height === 568) {
//Retina iPhone 5
resolution = '640x1096';
} else {
//Retina iPhone 4
resolution = '640x920';
}
} else {
//iPhone & iPod Touch
resolution = '320x460';
}
return prefix + resolution + '.' + extension;
}
var head = 'head';
var headTag = document.getElementsByTagName(head);
var linkTag = document.createElement('link');
linkTag.setAttribute('rel', 'apple-touch-startup-image');
linkTag.href = '/img/ios/' + dynamicLaunchImage('startup-', 'png');
if (!headTag.length) { //check if head tag exists, create otherwise
headTag = [ document.createElement(head) ];
document.body.appendChild(headTag[0]);
}
headTag[0].appendChild(linkTag);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment