사용자 정의 동적 디스플레이 그림 여백 비율 플러그인

미용사가 한 페이지를 디자인했는데 그 중 일부는 흰색을 남긴다. 그러나 데이터를 절약하고 페이지의 표현 속도를 높이기 위해 보통 우리가 필요로 하는 부분만 잘라낸다. 그리고 흰색을 남긴 부분은 실제로div,margin 또는padding으로 교체한다. 그리고Html 코드를 작성할 때 우리는 높이를 쓰지 않는다. 서로 다른 디스플레이와 서로 다른 핸드폰 단말기를 맞추기 위해서다.따라서 백분율로만 계산할 수 있다.
 
따라서, 나는 플러그인을 써서 다음과 같은 작업을 완성했다. 불러온 그림의 실제 표시 높이와 너비에 따라 그림의 앞과 뒤에 div를 추가했다. 이div의 높이는 실제적으로 실제 그림의 표시 높이의 백분율에 따라 계산된 것이다.
 
코드는 다음과 같습니다.

//       ，               ，              
function imgPercent(mySetting){

    var that = this;
    if(mySetting == "" || mySetting == undefined || typeof mySetting != "object"){
        mySetting = {};
    }
    //          ID
    var timeStamp = new Date().getTime();

    this.setting = {
        //        
        targetContent : "#imgPercent",
        //       
        imgURL : "../img/index_logo.png",
        //img    div     
        imgContainerClass : "",
        //img     
        imgClass : "",
        //  div   
        topClass : "",
        //  div   
        bottomClass : "",
        //          
        topPercent : 0,
        //          
        bottomPercent : 0,
        //   ID ，        
        objectId : "",
        //         
        beforeShow : function(plugin,id){
        },
        //         
        afterShow : function(plugin,id){
        }

    };

    this.setting = $.extend(this.setting, mySetting,{objectId:timeStamp});

    //    div HTML     
    this.getTopDiv = function(){
        var topDivHtml = '<div id="topDiv'+that.setting.objectId+'"></div>';
        //            Class  
        if(that.setting.topClass != "" && that.setting.topClass != undefined && typeof that.setting.topClass == "string"){
            topDivHtml = '<div id="topDiv' + that.setting.objectId + '" class="' + that.setting.topClass + '"></div>';
        }
        return topDivHtml;
    }

    //    div HTML     
    this.getImgDiv = function(){
        var imgDivHtml =  '<div id="imgDiv'+that.setting.objectId+'">';
        var imgHtml = '<img id="imgDiv'+that.setting.objectId+'" class="img-responsive div_center " src="'+that.setting.imgURL+'"/></div>';
        //            Class  
        if(that.setting.imgContainerClass != "" && that.setting.imgContainerClass != undefined && typeof that.setting.imgContainerClass == "string"){
            imgDivHtml = '<div id="imgDiv'+that.setting.objectId+'" class="' + that.setting.imgContainerClass + '">';
//                        '<img class="img-responsive div_center" src="'+that.setting.imgURL+'"/></div>';
        }
        //            Class  
        if(that.setting.imgClass != "" && that.setting.imgClass != undefined && typeof that.setting.imgClass == "string"){
            imgHtml = '<img class="img-responsive div_center '+that.setting.imgClass+'" src="'+that.setting.imgURL+'"/></div>';
        }

        return imgDivHtml + imgHtml ;
    }

    //    div HTML     
    this.getBottomDiv = function(){
        var bottomDivHtml = '<div id="bottomDiv'+that.setting.objectId+'"></div>';
        //            Class  
        if(that.setting.bottomClass != "" && that.setting.bottomClass != undefined && typeof that.setting.bottomClass == "string"){
            bottomDivHtml = '<div id="bottomDiv' + that.setting.objectId + '" class="' + that.setting.bottomClass + '"></div>';
        }
        return bottomDivHtml;
    }

    this.init = function(){
        $(that.setting.targetContent).html(that.getImgDiv());
        //         
        var targetHTML = '<div id="'+that.setting.objectId+'">' + that.getTopDiv() + that.getImgDiv() + that.getBottomDiv() + '</div>';
        //          
        if(that.setting.beforeShow != undefined && typeof that.setting.beforeShow == "function"){
            that.setting.beforeShow(that,that.setting.objectId);
        }
        //           
        $(that.setting.targetContent).html(targetHTML);

        //         
        var imgHeight = $("#imgDiv"+that.setting.objectId).find("img").height();
        //         ，                 
        var topDivHeight = imgHeight * that.setting.topPercent;
        //         ，                 
        var bottomDivHeight = imgHeight * that.setting.bottomPercent;

        $("#topDiv"+that.setting.objectId).css("height",topDivHeight);
        $("#bottomDiv"+that.setting.objectId).css("height",bottomDivHeight);
        //          
        if(that.setting.afterShow != undefined && typeof that.setting.afterShow == "function"){
            that.setting.afterShow(that,that.setting.objectId);
        }

    }

    this.resize = function(){
        //         
        var imgHeight = $("#imgDiv"+that.setting.objectId).find("img").height();
        //         ，                 
        var topDivHeight = imgHeight * that.setting.topPercent;
        //         ，                 
        var bottomDivHeight = imgHeight * that.setting.bottomPercent;

        $("#topDiv"+that.setting.objectId).css("height",topDivHeight);
        $("#bottomDiv"+that.setting.objectId).css("height",bottomDivHeight);
    }

    this.init();

}

 
 
PC의 브라우저에는 아무런 문제가 없지만 위챗 브라우저와 터미널 브라우저에는 내가 동적으로 추가한 코드가 시종 표시되지 않았다. 결국 내가 동적으로 추가한 코드가dom 나무에 들어가면 브라우저는 실제적으로 그림의 높이와 너비를 즉시 계산하지 않는다는 것을 발견했다.
 
해결 방법:
setTimeout () 방법으로 호출 지연

imgPercentObj = new imgPercent(mySetting);
setTimeout("resize()",200);