JQuery 中每次图像宽度和高度的不同结果
Different result for Image width and height each time in JQuery
这对我来说很奇怪,因为我正在更改 运行 在 document.ready() 中加载的图像的宽度和高度。
每次函数运行s,图片宽高都不一样
我使用此代码获取加载图像的宽度和高度:
var img = document.getElementById('imgLogo');
var width = img.clientWidth;
var height = img.clientHeight;
这是代码片段:
$(document).ready(function() {
SetLogo();
});
function SetLogo() {
var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
$('#imgLogo').attr("src", src);
if (src == "") {
$('#dvimg').addClass("hidden");
} else {
$('#dvimg').removeClass("hidden");
var panel = document.getElementById('dvimg');
var pwidth = panel.clientWidth;
var pheigh = panel.clientHeight;
var img = document.getElementById('imgLogo');
alert("image w= " + $('#imgLogo').width() + " image H= " + $('#imgLogo').height());
var ratio = img.clientWidth / img.clientHeight;
if (img.clientWidth > pwidth) {
alert('width > pwidth');
$('#imgLogo').height(pwidth / ratio);
$('#imgLogo').width(pwidth);
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", 0);
} else if (img.clientHeight > pheigh) {
alert('height > pheigh');
$('#imgLogo').height(pheigh);
$('#imgLogo').width(pheigh * ratio);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
$('#dvimg').css("padding-top", 0);
} else {
alert('else');
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
}
alert("image heigh after change : " + img.clientHeight + "image width after change : " + img.clientWidth);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvimg" class="col-md-12 panel mbl text-center" style="height: 300px; width: 400px;">
<img id="imgLogo" src="images/blank.jpg" />
</div>
此外,每个浏览器的结果都不同。
在此先感谢您的帮助。
图像必须首先加载,但文档就绪还不是这种情况 - 如果它没有被缓存。这就是为什么它在第一次加载页面时返回一个相当随机的数字。
为了始终正确,运行 $(window).on('load', function() { ... })
.
中的函数
编辑 - 不过我现在看到代码有些棘手。在 window 加载后,您不能 运行 整个函数,因为追加 src
发生在函数本身内部。所以最好把它拿出来并单独针对徽标的加载(.one()
是 .on()
的变体,它会触发一次):
$(document).ready(function() {
var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
$('#imgLogo').attr("src", src);
$('#imgLogo').one('load', function() {SetLogo()});
function SetLogo(){
...
}
});
完整片段:
$(document).ready(function() {
var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
$('#imgLogo').attr("src", src);
$('#imgLogo').one('load', function() {
SetLogo()
});
function SetLogo() {
if (src == "") {
$('#dvimg').addClass("hidden");
} else {
$('#dvimg').removeClass("hidden");
var panel = document.getElementById('dvimg');
var pwidth = panel.clientWidth;
var pheigh = panel.clientHeight;
var img = document.getElementById('imgLogo');
alert("image w= " + $('#imgLogo').width() + " image H= " + $('#imgLogo').height());
var ratio = img.clientWidth / img.clientHeight;
if (img.clientWidth > pwidth) {
alert('width > pwidth');
$('#imgLogo').height(pwidth / ratio);
$('#imgLogo').width(pwidth);
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", 0);
} else if (img.clientHeight > pheigh) {
alert('height > pheigh');
$('#imgLogo').height(pheigh);
$('#imgLogo').width(pheigh * ratio);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
$('#dvimg').css("padding-top", 0);
} else {
alert('else');
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
}
alert("image heigh after change : " + img.clientHeight + "image width after change : " + img.clientWidth);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvimg" class="col-md-12 panel mbl text-center" style="height: 300px; width: 400px;">
<img id="imgLogo" src="images/blank.jpg" />
</div>
这对我来说很奇怪,因为我正在更改 运行 在 document.ready() 中加载的图像的宽度和高度。 每次函数运行s,图片宽高都不一样
我使用此代码获取加载图像的宽度和高度:
var img = document.getElementById('imgLogo');
var width = img.clientWidth;
var height = img.clientHeight;
这是代码片段:
$(document).ready(function() {
SetLogo();
});
function SetLogo() {
var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
$('#imgLogo').attr("src", src);
if (src == "") {
$('#dvimg').addClass("hidden");
} else {
$('#dvimg').removeClass("hidden");
var panel = document.getElementById('dvimg');
var pwidth = panel.clientWidth;
var pheigh = panel.clientHeight;
var img = document.getElementById('imgLogo');
alert("image w= " + $('#imgLogo').width() + " image H= " + $('#imgLogo').height());
var ratio = img.clientWidth / img.clientHeight;
if (img.clientWidth > pwidth) {
alert('width > pwidth');
$('#imgLogo').height(pwidth / ratio);
$('#imgLogo').width(pwidth);
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", 0);
} else if (img.clientHeight > pheigh) {
alert('height > pheigh');
$('#imgLogo').height(pheigh);
$('#imgLogo').width(pheigh * ratio);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
$('#dvimg').css("padding-top", 0);
} else {
alert('else');
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
}
alert("image heigh after change : " + img.clientHeight + "image width after change : " + img.clientWidth);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvimg" class="col-md-12 panel mbl text-center" style="height: 300px; width: 400px;">
<img id="imgLogo" src="images/blank.jpg" />
</div>
此外,每个浏览器的结果都不同。
在此先感谢您的帮助。
图像必须首先加载,但文档就绪还不是这种情况 - 如果它没有被缓存。这就是为什么它在第一次加载页面时返回一个相当随机的数字。
为了始终正确,运行 $(window).on('load', function() { ... })
.
编辑 - 不过我现在看到代码有些棘手。在 window 加载后,您不能 运行 整个函数,因为追加 src
发生在函数本身内部。所以最好把它拿出来并单独针对徽标的加载(.one()
是 .on()
的变体,它会触发一次):
$(document).ready(function() {
var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
$('#imgLogo').attr("src", src);
$('#imgLogo').one('load', function() {SetLogo()});
function SetLogo(){
...
}
});
完整片段:
$(document).ready(function() {
var src = 'https://www.gstatic.com/webp/gallery/3.sm.jpg';
$('#imgLogo').attr("src", src);
$('#imgLogo').one('load', function() {
SetLogo()
});
function SetLogo() {
if (src == "") {
$('#dvimg').addClass("hidden");
} else {
$('#dvimg').removeClass("hidden");
var panel = document.getElementById('dvimg');
var pwidth = panel.clientWidth;
var pheigh = panel.clientHeight;
var img = document.getElementById('imgLogo');
alert("image w= " + $('#imgLogo').width() + " image H= " + $('#imgLogo').height());
var ratio = img.clientWidth / img.clientHeight;
if (img.clientWidth > pwidth) {
alert('width > pwidth');
$('#imgLogo').height(pwidth / ratio);
$('#imgLogo').width(pwidth);
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", 0);
} else if (img.clientHeight > pheigh) {
alert('height > pheigh');
$('#imgLogo').height(pheigh);
$('#imgLogo').width(pheigh * ratio);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
$('#dvimg').css("padding-top", 0);
} else {
alert('else');
$('#dvimg').css("padding-top", (pheigh - img.clientHeight) / 2);
$('#dvimg').css("padding-left", (pwidth - img.clientWidth) / 2);
}
alert("image heigh after change : " + img.clientHeight + "image width after change : " + img.clientWidth);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvimg" class="col-md-12 panel mbl text-center" style="height: 300px; width: 400px;">
<img id="imgLogo" src="images/blank.jpg" />
</div>