最近在做一個幫助文件，想做一個點選圖片放大的功能，於是使用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);
        }
    }
}