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).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类，可以为你调整图像大小和缓存。这是一个很好的工具，也是实现这一目标的更好方法。

jQuery根据类调整文档上的所有图像

4 个答案: