layui弹窗图片 第二次才居中

  • 慢点
  • 2019-11-05 10:28:36
  • 9已阅读
文章地址: https://www.itread01.com/content/1545124501.html

function openLayer(imgUrl) {    var imgUrl = imgUrl;
    getImageWidth(imgUrl,function(w,h){
        layui.use('layer', function(){            
        var layer = layui.layer;
            layer.open({
                type: 1,
                title:false,
                offset: 'auto',
                area: [w+'px',h+'px'],
                shadeClose:true,
                content: '<div><img style="max-width: 1450px;max-height: 800px" src="'+imgUrl+'"></div>'
            });
        });
    });
}
// 獲取圖片真實高度
function getImageWidth(url,callback) {    
    var img = new Image();
    img.src = url;    // 如果圖片被快取,則直接返回快取資料
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
        }
    }
}

//原来我是这样写,可能会出现不居中问题
function openImg(url){
    var img = "<img src='" + url + "' />";    
    layer.open({    
        type: 1,    
        shade: false,    
        title: false,    
        content: img,    
        maxWidth: "1000px",    
        maxHeight: "700px",    
        cancel: function () {    
        }    
    });  
}  
//出现问题的原因是 图片内容撑开了layer的大小,导致图片偏下,
//重新打开居中就按撑开的大小重新计算了