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

<script type="text/javascript">
//限制图片大小
function LimitImg() {
$(".mo").each(function () {
var image = new Image();
image.src = $(this).attr("src");
if (image.height > 700 && image.width <= 454) {
$(bt).css("height", "700");
}
else if (image.width > 454 && image.height <= 700) {
$(this).css("width", "454");
}
else if (image.width > 454 && image.height > 700) {
$(this).css("width", "454");
var iH = 454 * (image.height) / image.width;
if (iH > 700) {
$(bt).css("height", "700");
}
}
});
}

$(function () {
LimitImg();
});

bt为包含着图片的div块

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

追问

第一篇代码：没拿到Image的src，就拿不到他的高宽。No
第二篇代码：$(this).on("load",function(){});试过了，没用。NO
我觉我调用这个方法的位置错了，应该在窗体加载完成后来调用。
还是谢谢你。

追答

第一篇代码：没拿到Image的src，就拿不到他的高宽。No

jQuery 中的 jQuery(document).ready 是 document 加载，而不是 window 加载，所以 image 的 src 在页面出现的瞬间就可以拿到，不需要 image 加载完毕。

第二篇代码：$(this).on("load",function(){});试过了，没用。NO

用 jQuery 的 load 可以是可行的，只是得到的 width 和 height 不准确。

-------------

还是需要你之前的方法 var image =new Image();
只是你需要再加上 image.onload = function() {}，所有判断和 .css() 都必须在这个函数里面执行。

-------------

$(window).on("load", function() {/*、、、*/}); 这是窗体加载的代码
但是要等 img，frame 等全部内容加载完毕才会执行 function 里面的代码，这个时候你的图像已经显示，并且可能已经超出 $(bt) 范围，再执行 .css() 会出现页面跳动。

追问

谢谢，但是我已经解决了，真的是调用LimitImg方法的位置错了。我页尾加了

window.onload=function(){
LimitImg();

}

这样就能行了。

温馨提示：内容为网友见解，仅供参考

当前网址：https://22.t2y.org/zz/2i2cxh2tc.html