关于rem的计算顺序

/*响应式字体*/
/*
 * 字体响应式
 * 屏幕>640px时，html字体大小
 * 屏幕<640px时，html字体根据屏幕做出相应
 * */
(function(doc,win){
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function(){
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return ;
            if(clientWidth>=1024){
                docEl.style.fontSize = "100px";
            }else if(768<clientWidth<1024){
                docEl.style.fontSize = 100* (clientWidth / 1024) + "px"
            }else if(clientWidth<768){
             docEl.style.fontSize = 100* (clientWidth / 768) + "px"
            }
        };
    if(!doc.addEventListener) return ;
    win.addEventListener(resizeEvt,recalc,false);
    doc.addEventListener("DOMContentLoaded",recalc,false);
})(document,window);

 这段代码是根据屏幕大小计算字体的值也可以用来计算宽高，但是问题是页面一加载的时候   页面上的图片很明显的就是先变小 然后再正常，调试过是因为页面加载后再计算rem值导致的，如何解决呢？我想到的方法是页面没加载完不显示，完全加载完在显示 不知道有没有用？也不知道怎么实现呢？？？？？