Question

我有一个<li>元素的数组，我想把它变成一个旋转木马，只是我希望图像在大于640x480的情况下调整大小以及在框架中居中。

我有以下代码： HTML：

<ul id="carousel">      
    <li><img src="pic1.jpg" /><p><b>2012</b> something</p></li>
    <li><img src="pic2.jpg" /><p><b>2016</b> something else.</p></li>
</ul>

JQuery的：

var imW=[];
var imH=[];
//...
$('li',obj).each(function(index){ 
    itemSources.push( $(this).find('img').attr('src') );                
    var img = $(this).find('img'); 
    imW.push(img.width());
    imH.push(img.height());
});

然后我使用itemSources[i]，imW[i]和imH[i]来调整图片大小，并添加任何必要的填充以将其置于框架中心。

如果我的互联网足够快并且在计算大小之前加载图像，那么哪个工作正常。（公顷！）

我知道我想要这样的东西：

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);
};
img.src = $(this).find('img').attr('src');

但我无法保存宽度和高度，因为只是推送到数组超出范围，因此为此创建外部回调。如何将那些容易打印到控制台的尺寸保存到我的imW和imH数组中？

Answer 1

基本上可以设置图像的属性，例如data-loaded="true"加载图像后加载最后一个图像然后可以迭代图像并加载数组

在onload方法中，执行以下更改

var img = new Image();
img.onload = function() {
    console.log(this.width + 'x' + this.height);

    //set this attribute to indicate that this image has been loaded already
    $(this).attr( "data-loaded", "true" );

    //check if all images have this attribute
    if ( $( "img[data-loaded='true']" ).size() == $( "img" ).size() ) 
    {
      //now iterate the images to load your array
    }
};
img.src = $(this).find('img').attr('src');

如何从onload保存图像宽度和高度？

1 个答案: