2

我对 Jquery 很陌生，我有以下问题。

我写了一个函数来调整图像大小，同时保持纵横比。为了更具可读性，我在这个版本中有一些比需要更多的“如果”。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 中做到这一点。

我可以在那个之前运行第二个 .each 并将它们全部隐藏，但我想第二次去 dom 为同一件事运行 each 并不是最好的解决方案。那么负载究竟是如何工作的呢？

例如，如果我这样做：

$('.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 呢？我需要两个 .each 吗？

4

2 回答 2

1

您的问题是当您通过“$（window）.load（...）”实际加载所有元素时绑定加载事件

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

代替“$(window).load(...)” 使用“$(document).ready(...)”，然后将 $('.img-thumb') 加载事件作为“$('。 img-thumb').load(..)"; 您不需要使用每一个，因为所有图像都具有“img-thumb”类将具有您在您的情况下进行调整大小操作的加载事件。

于 2012-10-20T19:38:52.660 回答
0

这是我的问题。我不明白负载是如何工作的。我是说。这将起作用，但仅在加载所有图像时

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

现在，回答你的问题：

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

  1. 您可以CSS在呈现页面时使用隐藏图像。当它完成加载后，您可以使用 jQuery 更改大小，然后让图像再次可见。参考这个例子：http: //jsfiddle.net/CYfma/

  2. 你为什么想做这个？最好的办法是存储已调整大小的图像（前提是您事先知道目标缩略图大小）。这是 Facebook 和许多其他网站用来节省带宽的概念。在客户端渲染大图像并调整它们的大小不会使它们的重量更小。这对页面加载速度有很大影响。

  3. 如果您事先知道目标尺寸，您也可以只使用 CSS 或 HTML 中图像的宽度和高度属性来使它们成为所需的尺寸。

编辑

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

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

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

希望能帮助到你

于 2012-10-20T19:27:28.280 回答