js方法在加载时调用,但窗体初次加载时，该方法却没有执行，而在页面刷新时，该方法却执行了

发布网友 发布时间：2022-04-25 13:49

我来回答

共2个回答

热心网友 时间：2022-04-25 15:18

img 元素只有当 onload (完全加载，可以显示) 的时候你才能获得它的属性 width, height, naturalWidth, naturalHeight。(naturalWidth 和 naturalHeight 是它们真实的尺寸，但 IE 6/7/8 不支持。)

你的 if 不执行是因为当 JavaScript 运行到这一行的时候 img 还没有被加载，得不到 width 和 height 属性值，瞬间就被忽略了。所以你必须等每一个 img 加载才能设置它父层 bt 的尺寸。

窗体加载的事件是 $(window).on("load", function() {/*、、、*/});，但你的情况不需要。

function LimitImg() {
$(".mo").each(function() {
var image = new Image();
// 图像加载完毕
image.onload = function() {
if (this.height > 700 && this.width <= 454) {
$(bt).css("height", "700");
}
else if (this.width > 454 && this.height <= 700) {
$(this).css("width", "454");
}
else if (this.width > 454 && this.height > 700) {
$(this).css("width", "454");
var iH = 454 * (this.height) / this.width;
if (iH > 700) {
$(bt).css("height", "700");
}
}
// 销毁 image 以防内存溢出
image = null;
}
// 注意 image.src 必须写在 image.onload 之后
image.src = $(this).attr("src");
});
}

使用 jQuery 的 load 也可以得到 image 的尺寸，但如果有 CSS 或父层*，得到的 width 和 height 是不准确的。所以必须使用 new Image()。

$(".mo").each(function() {
$(this).on("load", function() {
alert($(this).width() + " " + $(this).height());
});
});

热心网友 时间：2022-04-25 16:36

你的img标记是否提供了style设置呢？如<img src="" style="width:...;height:..." />
如果没有的话，第一次访问页面时图片还没有加载完成，所以所有的图片符合要求，而不是js没执行，而刷新的时候，因为图片从缓存加载，这个时候函数的作用就体现出来了。
只是因为页面加载完毕并不证明图片加载完毕的原因。