For my website, I have implemented 4 different .css files to handle various screen resolutions.
Here is the innovative jquery code I've developed to dynamically load these files based on the width of the screen.
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="public/_css/normal.css" />
<script language="javascript" type="text/javascript">
function adjustStyle(width)
{
width = parseInt(width);
if(width >= 1920)
{
$("#size-stylesheet").attr("href", "public/_css/bigger.css");
}
else if (width >= 1600)
{
$("#size-stylesheet").attr("href", "public/_css/big.css");
}
else if (width >= 1366)
{
$("#size-stylesheet").attr("href", "public/_css/normal.css");
}
else
{
$("#size-stylesheet").attr("href", "public/_css/small.css");
}
}
$(function()
{
adjustStyle($(this).width());
$(window).resize(function()
{
adjustStyle($(this).width());
});
});
</script>
While testing the page in Chrome, I noticed that whenever I resize the window, it flickers excessively. On the contrary, it functions seamlessly on IE8 and Firefox.
You can view a live example of this page by visiting: testing page
I suspect that each time the window is resized, the css files are being reloaded repeatedly, causing the flickering issue. Is there a way to preload the css files for quicker loading during window resizing?