layui弹出层第一次打开不居中，第二次才居中

+关注

逍遥涛子

2021-03-12 14:44阅读 0

最近在做一个帮助文档，想做一个点击图片放大的功能，于是使用layui的弹出层，代码如下

/*
打开弹出层
 */
function openLayer(imgUrl) {
    var imgUrl = imgUrl;
    layui.use('layer', function () {
        var layer = layui.layer;
 
        layer.open({
            type: 1,
            title: false,
            offset: 'auto',
            area: ['auto', 'auto'],
            shadeClose: true,
            content: '<div><img style="max-width: 1450px;max-height: 800px" src="' + imgUrl + '"></div>'
        });
    });
}

但是每次刷新页面后第一次打开弹出层，弹出层总是水平在左或者靠下，有时显示一半。第二在弹出就正常居中了。

解决办法：在js中获取图片的真实大小

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);
        }
    }
}

赞赏Ta 赞赏Ta