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


Comments

Post a Comment

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

i'm running strange behavior powershell start-process call. here call: $process = start-process ` "c:\somepath\mybinary.exe" ` -passthru ` -credential $defaultcredential ` -wait ` -workingdirectory "c:\somepath" ` -loaduserprofile if ($process.exitcode -ne 0) { #do } this call return exit code - 1073741502 . after quick search, exit code seems related generic error when program not load required dll (aka. status_dll_init_failed ). when run without -credential $credential program runs correctly. in order isolate problem, manually launched some.exe in prompt target credential , runs smoothly. so problem seems come way start-process cmdlet launch process. i found potential solutions problem tried apply no luck : link , link . would have idea of what's going on here ? edit 1: run proc mon monitoring program activities when launched directly or via powershell script. problem seems occur when loading kernelbase
Read more

twig - Using Twigbridge in a Laravel 5.1 Package -

i'm trying create laravel 5.1 package uses twigbridge instead of .php views. can normal .php views display fine, when try make use of .twig templates i'm met error. possible use twigbridge templates when creating views laravel package or pretty stuck blade , php ? edit 1: loading twig template without extending works. it's when start using {% extends 'file' %} error comes out. i error error loading /virtual/laravel/packages/username/mypackage/src/views/sample.twig: template "templates.master" not defined () in "/virtual/laravel/packages/username/mypackage/src/views/sample.twig" @ line 1. my folders username |_ mypackage |_ src |_ controllers - samplecontroller.php |_ views |_ templates - master.twig - sample.twig twig template sample.twig {% extends 'templates.master' %} {% block content %} {{ parent()
Read more

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -

i have hashset's each stores t, have written test application compares different relation algorithms can think of, i'm not pleased results getting. does there exist more efficient ways of achieving object relations, once testing? using system; using system.collections.generic; using system.linq; using system.text; using system.threading.tasks; using system.diagnostics; namespace linqtests { class program { static void main(string[] args) { hashset<user> usertable = new hashset<user>(); hashset<userproperty> userpropertytable = new hashset<userproperty>(); #region lets create dummy data. console.writeline("please wait while creating dummy data, can take while..."); console.writeline(""); int rows = 1000000; for(int x = 0; x < rows; x++) { random rnd = new random(); // ad
Read more