Monday, May 23, 2011

workaround: iphone not caching pages larger than 25KB

{
   iPhone Safari Cache-Limits.:
   Make sure any component of a page is < 25KB, since the iPhone only caches
   components smaller than 25KB uncompressed!
}

The above statement i heard many times.
It makes jQuery,
an important framework in my design,
load not fast enough in mobile devices.
i want to work around it.

The workaround is very simple.

Firstly,
replace all the single quotation marks(') to, as in this example, ';;;' , and,
replace all the backslashes(\) to, as in this example, '@@@'.


Secondly,
split jQuery into four files.
Each of the file is not more than 25KB.

Then,
wrap it by j[0]='..............';
the dots within the single quote are the contents of the split file.

so,
j[0]='..............'; for the first file with file name of j0.js,
j[1]='..............'; the 2nd file, j1.js,
j[2]='..............'; the third, j2.js,
j[3]='..............'; and the last one, j3.js.
placing these files in the same web root directory.

Then,
insert the html codes in the web page, for example,

<script>
    j=[];
    function jqInit(d){
        if(0 in j && 1 in j && 2 in j && 3 in j){
            j=j.join('').replace(/@@@/g,'\\').replace(/;;;/g,"'");
            eval(j);
            //delete j;
       }else{
            setTimeout('jqInit('+n+100+')', d)
       }
    }
</script>
<script src="j0.js"></script>
<script src="j1.js"></script>
<script src="j2.js"></script>
<script src="j3.js"></script>
<script>jqInit(100)</script>


That's all.

Use FireBug to check whether there are global variables of jqInit, j, $ and jQuery.

Hoping that, there will be some CDNs to host the split jQuery.
And, jQuery official website provides the split version of jQuery.
(Note: don't copy and paste the above codes directly, since the codes have been escaped by the blob editor.)

No comments:

Post a Comment