最近在做一个帮助文档,想做一个点击图片放大的功能,于是使用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);
}
}
}