自定义 动态显示图片留白比例插件

美工设计好一个页面，其中部分有留白，但是为了节省流量，加快页面展现的速度，一般只会切实际我们需要的部分，然后留白的部分实际上用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);