Question

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块

Answer 1

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

}

这样就能行了。

Answer 2

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

追问

" />
这些数据都是动态获取的，这样会影响吗

追答

应该不会，你查看一下源文件看看结果就知道，如果width_string和height_string正常输出的话...

追问

这个是正常输出的。现在我给这个标签加了style="border:1px solid red;"，但是页面初次加载的时候，还是限制不了图片的高度,但是只要在LimitImg()方法第一行加个alert();这个方法就会被执行

追答

下班了，你试试
$(function(){
$('img').ready(function () {LimitImg(this);});
});

我想你能明白的意思哈，还不行咱们明天接着研究

追问

我刚刚用firebug调试了，程序是进了LimitImg()方法的，但是走到$(".mo").each();方法的时候，就跳出去了，会不会是没有找到$(".mo")这个元素呢，那我就想到了在窗体加载完成后，去调用LimitImg();但是我不知道窗体加载完成后是什么事件，百度也没百度到，你知道吗?

追答

你可以alert($('.mo').length)知道该元素的数量啊，至于窗体，我不是很理解你的意思，iframe吗？复制相关的html源码上来看看？

追问

额，不是窗体，就是网页，习惯说成窗体。貌似就是没找到那个.mo，页面加载完成后的事件是啥子呢？

追答

$(document).ready(function(){
//...

});
不过这个应该是等效于$(function(){})的吧。你试试看。

追问

谢谢哈，$(function(){})就是窗体加载时的，不能在这里面调用
我用了window.onload=function(){
LimitImg();

}
这样就能行了。

追答

哦哦，恭喜