Question

我对Jquery很新，我有以下问题。

我写了一个函数来调整图像大小，同时保持宽高比。为了更具可读性，我在这个版本中有一些“if”而不是需要。 html结构是这样的。

<div class="post">
    <div class="date"></div>
    <div class="thumbnail">
        <img class="img-thumb" />
    </div>
    <div class="post-body">
        <p>...</p>
        <img />
        <p>...</p>
    </div>              
</div>

对于调整大小（我还通过添加一些填充来使图像居中。我认为我对代码的这一部分没有错误。）

$(window).load(function() {
    var parentWidth  = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok
    var parentHeight = 196;//max height

    $('.img-thumb').each(function () {
        var img=$(this);
        var width  = img.width(); //image width
        var height = img.height(); //image height
            var aspect = width/height;
            var wide = width/parentWidth;
            var tall = height/parentHeight;

        if(width > parentWidth) { 
                if (wide > tall) { 
                    width  = parseInt(parentWidth,10);
                    height = parseInt(parentHeight/aspect,10);
                }
            }
            if(height > parentHeight) {
                if (tall > wide) {
                    height = parseInt(parentHeight,10);
                    width  = parseInt(parentWidth*aspect,10);
                }
            }
            margin_top  = parseInt((parentHeight - height) / 2,10);
            margin_left = parseInt((parentWidth  - width ) / 2,10);

            img.css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                        'height'     :height   + 'px',
                        'width'      :width    + 'px'
                        });
    });
});

这是我的问题。我不确切知道负载是如何工作的。我的意思是。这将起作用，但仅在加载所有图像时才有效。但它有两个问题。第一个是它必须等待所有加载，第二个是用户将看到调整大小，所以我首先必须隐藏图像并用show（）显示它们。我可以用css来做这个但是这样当javascript被禁用时它们仍然会被隐藏所以我更喜欢在jquery中这样做。

我可以在那之前运行第二个。然后将它们全部隐藏起来，但我想第二次去dom运行同一个东西并不是最好的解决方案。那么负载如何正常工作呢？

如果我这样做，例如：

$('.img-thumb').each(function () {

    var parentWidth  = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok
    var parentHeight = 196;//max height
    var img=$(this);
    img.hide();
    img.load(function() {
        var width  = img.width(); //image width
        var height = img.height(); //image height
            var aspect = width/height;
            var wide = width/parentWidth;
            var tall = height/parentHeight;

        if(width > parentWidth) { 
                if (wide > tall) { 
                    width  = parseInt(parentWidth,10);
                    height = parseInt(parentHeight/aspect,10);
                }
            }
            if(height > parentHeight) {
                if (tall > wide) {
                    height = parseInt(parentHeight,10);
                    width  = parseInt(parentWidth*aspect,10);
                }
            }
            margin_top  = parseInt((parentHeight - height) / 2,10);
            margin_left = parseInt((parentWidth  - width ) / 2,10);

            img.css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                        'height'     :height   + 'px',
                        'width'      :width    + 'px'
                        }).show();
    });
});

它不起作用。我的意思是我仍然可以看到调整大小。我想原因是每个循环的第二部分在加载第一个图像之前不会执行。那么我如何告诉jquery执行加载代码的outdise？我需要两个。每个？

Answer 1

您的问题是在实际加载所有元素时绑定load事件 “$（窗口）.load（...）”

您希望在下载HTML dom时将load事件绑定到图像，但是您希望调整图像大小并在加载后显示它们。因此，

而不是“$（window）.load（...）”使用“$（document）.ready（...）”，然后将$（'。img-thumb'）加载事件作为“$” （ '的.img-拇指'）负载（..）“。您不需要使用每个图像，因为所有图像都具有“img-thumb”类将具有您在您的情况下执行调整大小操作的加载事件。

Answer 2

这是我的问题。我不确切知道负载是如何工作的。我的意思是。这将起作用，但仅在加载所有图像时

jQuery在DOM完全加载时开始工作，这就是为什么每个操作都对用户可见。当你调用$(document).ready();时，你实际上是在告诉jQuery它应该等到页面完成加载之后再执行所需的操作。

现在，回答你的问题：

如果我理解正确，您的图像大于您希望在页面上显示的尺寸，并且您使用jQuery为它们提供所需的尺寸？

您可以使用CSS在呈现页面时隐藏图像。完成加载后，您可以使用jQuery更改大小，然后再次显示图像。请参阅此示例：http://jsfiddle.net/CYfma/
您为什么要这样做？此处最好的事情（如果您事先知道目标缩略图大小），就是存储已调整大小的图像。这是Facebook和许多其他网站用来节省带宽的概念。渲染大图像并在客户端调整它们的大小并不会使它们的重量变小。这会对您的网页加载速度产生很大影响。
如果您事先知道目标尺寸，您还可以使用CSS或HTML中图像的宽度和高度属性来使它们达到所需的尺寸。

修改

为了回应您对禁用javascript的担忧，这是我的建议：

您可以使用CSS（而不是jquery）来隐藏图像，而不是使用javascript。这意味着启用javascript后，图像将隐藏直到jQuery启动。根据我的理解和观察，document.getElementById("image").style.display="none";之类的行应该在$(document).ready();内的代码块之前执行。我已尝试过该解决方案，您可以在此处查看：http://jsfiddle.net/CYfma/1/

我希望我能正确理解你的问题，如果没有，我真诚地道歉： - ）

希望有所帮助

在Jquery中调整图像大小，保持负载的纵横比

2 个答案: