jquery - 元素在窗口加载时未正确调整大小

Question

Demo

我正在测试一个小的 jQuery 调整大小插件。

当页面加载时，默认页边距似乎包括在内，但会在窗口调整大小时发生变化。它似乎有时也会发生，但并非总是如此。

<style>

* {
    margin: 0;
}

.image-container {
    width: 50%;
    height: 50%;
    float: left;
}

#default        {   background-color: #aaa; }
#loose          {   background-color: #bbb; }
#max            {   background-color: #ccc; }
#max-loose      {   background-color: #ddd; }

</style>

<script>

$(document).ready(function(){

    $('#default > img').load(function(){
        $(this).tailorfit(this.width, this.height);
    });

    $('#loose > img').load(function(){
        $(this).tailorfit(this.width, this.height, false);
    });

    $('#max > img').load(function(){
        $(this).tailorfit(200, 200);
    });

    $('#max-loose > img').load(function(){
        $(this).tailorfit(200, 100, false);
    });
});

</script>

<div class="image-container" id="default">
    <img src="bmo.png">
</div>

<div class="image-container" id="loose">
    <img src="bmo.png">
</div>

<div class="image-container" id="max">
    <img src="bmo.png">
</div>

<div class="image-container" id="max-loose">
    <img src="bmo.png">
</div>

<script>
/**
 * tailorfit
 *
 * @author Rudolf Theunissen <rudolf.theunissen@gmail.com>
 * @copyright Rudolf Theunissen 2013
 * @license MIT <http://opensource.org/licenses/mit-license.php>
 * @link https://github.com/paranoid-android/tailorfit
 * @version 1.0.0
 */

jQuery.fn.tailorfit = function(maxWidth, maxHeight, keepAspect){

    if(keepAspect == undefined) keepAspect = true;
    if(maxWidth   == undefined) maxWidth = true;
    if(maxHeight  == undefined) maxHeight = true;

    var element = $(this);
    var container = $(this).parent();

    element.css('position', 'relative');

    // Just needed this line too.
    onResize();

    $(window).load(function(){
        onResize();
    });

    $(window).resize(function(){
        onResize();
    });

    function onResize(){

        var containerHeight = container.outerHeight(true);
        var containerWidth = container.outerWidth(true);

        var x, y, w, h;

        if(maxWidth == 0) maxWidth = containerWidth;
        if(maxHeight == 0) maxHeight = containerHeight;


        if(!keepAspect){
            if(containerWidth < maxWidth){
                x = 0;
                w = containerWidth;
            } else {
                x = (containerWidth - maxWidth) / 2;
                w = maxWidth;
            }

            if(containerHeight < maxHeight){
                y = 0;
                h = containerHeight;
            } else {
                y = (containerHeight - maxHeight) / 2;
                h = maxHeight;
            }
        } else if(containerWidth >= maxWidth && containerHeight >= maxHeight){
                x = (containerWidth - maxWidth) / 2;
                y = (containerHeight - maxHeight) / 2;
                w = maxWidth;
                h = maxHeight;
        } else {
            var maxRatio = maxWidth / maxHeight;
            if(maxRatio > containerWidth / containerHeight){
                var rh = containerWidth / maxRatio;
                x = 0;
                y = (containerHeight - rh) / 2;
                w = containerWidth;
                h = rh;
            } else {
                var rw = containerHeight * maxRatio;
                x = (containerWidth - rw) / 2;
                y = 0;
                w = rw;
                h = containerHeight;
            } 
        }

        element.css({
            left: x, top: y, width: w, height: h
        });
    }
}
</script>

在 Chrome 26.0 上测试

Answer 1

您应该使用 css 类隐藏默认图像，并在窗口加载和调整图像大小时显示它们:

<style type="text/css"> img.myclass{display:none}<style>

<script>
window.onload = function(){
    $('#default > img').load(function(){
                $(this).tailorfit(this.width, this.height);
            });

            $('#loose > img').load(function(){
                $(this).tailorfit(this.width, this.height, false);
            });

            $('#max > img').load(function(){
                $(this).tailorfit(200, 200);
            });

            $('#max-loose > img').load(function(){
                $(this).tailorfit(200, 100, false);
            });

            $('.myclass').removeClass('myclass');

        };

</script>

或者使用某种动画作为 fadeIn() 以获得更好的效果。