cookies - Javascript Retina / HD display detection and blocking page render during reload -

my question pretty page reload rather retina detection. i'm using code below in head tag retina display :

<script type="text/javascript">                if( document.cookie.indexof('device_pixel_ratio') == -1                   && 'devicepixelratio' in window                   && window.devicepixelratio == 2 ){                  var date = new date();                 date.settime( date.gettime() + 3600000000 );                  document.cookie = 'device_pixel_ratio=' + window.devicepixelratio;                 //if cookies not blocked, reload page                 if(document.cookie.indexof('device_pixel_ratio') != -1) {                     window.location.reload(true);                 }               } </script> 

it's detecting visitor's screen type, storing cookie , reload if it's retina display. it's working without issue except one.

reload function doesn't stop page rendering. because of this, see unstyled page on first visit (half loaded) refresh comes. afterwards, fine rest of site since cookie stored.

so obviously, php doesn't provide function detect screen type. must done through js. js doesn't have proper tool reloading / redirecting without loading page, code being used in head.

in short, i'm stuck in between. hope may have suggestion reloading without showing content on first load (it's displaying inline styling put in head). or displaying standard images on first load , allowing retina rest of browsing experience best option?

by way tried both reload(true) , reload(false). didn't help.

---

update : please see marat tanalin's answer below possible workarounds , better solutions on retina / hd display image use rather storing cookie + reloading.

after went deeper on this, realized generating both retina , standard images may not answer time due *caching methods. in other words, displaying low quality images visitor on first visit , displaying high quality images after refresh may not work since low quality images (and scripts) cached.

i decided go 1.5x single image size svg upload support. although it's not 100% best answer on every aspect, better option losing reliability.

*i'm wordpress developer , refer wp super cache , similar cache methods aware of may issue on other cache methods well.

essentially, want stop page rendering till have run script.

this can done using external js file. when browser finds external file, wait till run. on other hand if have inline <script> tag, browser not wait.

actually, recommended never block page rendering, improve page load times, purpose necessary. more information, can consult https://developers.google.com/speed/docs/insights/blockingjs