jQuery调整了类准备好文档上所有图像的大小

Question

我有一个包含图像的页面，我希望在使用jQuery的文档上调整它们的大小（通过获取某些CSS类）。 这些图像的初始“ .test”在CSS文件中没有任何属性。 我知道如何给他们新的课程，以便他们可以调整大小。 但是，我想根据宽度或高度调整大小，以便它们看起来都一样。

我的问题是我无法获取其宽度/高度。 我的代码是这样的：

$(document).ready(function(){

    $('.test').each(function(){
        var img_width = $(this).width();
        var img_height = $(this).height();
        alert("My width:" + img_width + "px, My Height: " + img_height + "px");

        if (img_width > img_height)
        {
            //resize to height
        }else{
            //resize to width
        }
    });
})

我在if语句之前收到的警报始终返回0-尽管它确实显示了正确的次数。

我还尝试使用$(this).width;获得宽度（以及高度） $(this).width; 和$(this).offsetHeight; 和$(this).attr('width'); 但是，如果结果不为0，则为undefined 。

我究竟做错了什么？

Answer 1

采用

$(window).load(function() {

代替

$(document).ready(function(){

当所有图像都实际加载后，将触发加载事件。

使用jQuery的.load（）方法将加载事件处理程序附加到窗口或图像等更特定的项目。

资料来源： http ： //api.jquery.com/ready/

Answer 2

$(document).ready(function(){

    $('.test').load(function(){
        var img_width = $(this).width();
        var img_height = $(this).height();
        alert("My width:" + img_width + "px, My Height: " + img_height + "px");

        if (img_width > img_height)
        {
            //resize to height
        }else{
            //resize to width
        }
    });
})

Answer 3

您还可以签出SLIR： https : //github.com/lencioni/SLIR

Answer 4

不久前，我也遇到了这个问题。 问题是图像尚未完全加载。

但是，我建议不要这样做。 加载大图，然后在客户端调整大小不是一个好方法。 您应该考虑在服务器端调整它的大小，以便用户不必下载大图像也不用。

您应该看看phpThumb，它是一个很棒的PHP类，可以为您调整大小并缓存图像。 这是一个很好的工具，也是实现这一目标的更好方法。