Question

我有一个简单的页面，它从数组加载一个随机图像，并使用CSS中的负边距集中定位它。这当前可以工作，因为所有图像大小相同，但我想调整代码，以便它可以容纳不同尺寸的图像。

是否可以在数组阶段计算图像的高度和宽度，然后将其传递给CSS / HTML以将其集中定位？这是我目前正在使用的代码 - 任何帮助将不胜感激。

HTML / CSS：

#content {
margin-top: -206px;
margin-left: -290px;
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
}

<div id="content">
<img class="shuffle" src="" width="580" height="413" border="0" alt="" />
</div>

JQuery的：

$(document).ready(function() { $('.shuffle').randomImage({path: 'images/'}); } );

(function($){ $.randomImage = { defaults: { path: 'images/', myImages: [ 'image01.jpg', 'image02.jpg','image03.jpg', 'image04.jpg', 'image05.jpg' ] } }

    $.fn.extend({ randomImage:function(config) { 
            var config = $.extend({}, $.randomImage.defaults, config); 
            return this.each(function() {
                var imageNames = config.myImages;
                var imageNamesSize = imageNames.length;
                var randomNumber = Math.floor(Math.random()*imageNamesSize);
                var selectedImage = imageNames[randomNumber];
                var fullPath = config.path + selectedImage;
                $(this).attr( { src: fullPath, alt: selectedImage } ); 
            }); 
        }
    });
})(jQuery);

Answer 1

这样：

...
var fullPath = config.path + selectedImage;
var img = new Image(); 
img.src = fullPath;
var width = img.width;
alert(width); 
...

我在FF3.6中进行了测试，但它确实有效。

希望这会有所帮助。干杯

Answer 2

谢谢;这指向了我正确的方向。下面是我最终得到的代码，它适用于Firefox 5和Safari 5.它不是特别优雅，但功能正常 - 也许其他人可能能够简化它。

编辑19.07.11： 根据{{3}}，我大大简化了代码;但我觉得它可以通过进一步的工作来进一步简化它。

HTML：

<div id="wrapper">
    <div id="content"></div>
</div>

jquery的：

jQuery(document).ready(function($) {

    var images = ['image01.jpg', 'image02.jpg','image03.jpg','image04.jpg','image05.jpg'];

    $('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#content');

    (function($) {
        $.fn.verticalAlign = function() {
            return this.each(function(i) {
                var oh = $(this).height();
                var wh = $(window).height();
                var middle = (wh - oh) / 2;
                if (middle > 0) {
                    $(this).css('margin-top', middle);
                } else {
                    $(this).css('margin-top', 0);
                }
            });
        };
    })(jQuery);

    $(window).load(function() {
        $("#content").verticalAlign();
        var showContent = function() { $('#content').fadeIn(750); };
        setTimeout(showContent, 100);
    });

    $(window).bind('resize', function() {
        $("#content").verticalAlign();
    });
});

使用jquery显示具有不同尺寸的随机图像

2 个答案: