调整jQuery的图像大小，保持负载的纵横比

我对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中进行。

我可以在那之前运行一秒钟。那么负载如何完全工作？

例如，如果我这样做：

$('.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执行加载代码的耗尽呢？我需要两个吗？

您的问题是，当您实际加载所有元素时，您将负载事件绑定" $（window）.load（...）"

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

而不是" $（window）.load（...）"使用" $（document）。（'.img-thumb'）。负载（..）";您不需要使用每个图像，因为所有图像都具有" IMG-THUMB"类，在您的情况下，您将进行调整大小操作的负载事件。

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

jQuery在满载DOM时开始工作，这就是为什么用户可以看到每个动作的原因。当您致电$(document).ready();时，您实际上是在告诉jQuery，它应该等到页面完成加载后完成所需的操作。

现在，回答您的问题：

如果我正确理解，您的图像比您希望在页面上显示的大小更大，并且您正在使用jQuery给他们提供所需的维度？

您可以在渲染页面时使用CSS隐藏图像。加载完成后，您可以使用jQuery更改尺寸，然后使图像再次可见。请参阅此示例：http：//jsfiddle.net/cyfma/
您为什么要这样做？这是Facebook和许多其他网站用于节省带宽的概念。渲染大图像并在客户端调整大小不会使其重量较小。这对您的页面加载速度有很大的影响。
如果您提前知道目标大小，也可以使用CSS或HTML中图像的宽度和高度属性使其成为所需的大小。

编辑

回答您对残疾JavaScript的关注，这是我的建议：

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

我希望我能正确理解您的问题，如果不是，我真诚道歉： - ）

希望它有帮助

相关内容

最新更新

热门标签：