bx 滑块 - 获取图像的高度和宽度

Question

我正在尝试获取 bx 滑块幻灯片中图像的高度和宽度，问题是它们中的每一个（没有加载的第一个）都返回 零。

这是我的代码示例：

$('.slides > li > img').each(function(){

    var $this = $(this);
    var imgWidth = $this.width();
    var imgHeight = $this.height();

    console.log(imgWidth);
    console.log(imgHeight);

})

我还尝试将它们放在这样的加载函数中：

$('.slides > li > img').each(function(){


    $this.on('load', function(){

    var $this = $(this);
    var imgWidth = $this.width();
    var imgHeight = $this.height();

    console.log(imgWidth);
    console.log(imgHeight);

 }
})

...但是还是不行=\

任何帮助将不胜感激！

编辑：

这是一个小提琴：http://jsfiddle.net/a3BUA/1/

编辑 2：

我现在看到，当模式设置为淡出时 - 其余的 <li> 元素设置为 display:none。尽管如此，有没有办法获得图像尺寸？

Answer 1

滑块会隐藏除第一张图像以外的所有图像，并且隐藏的图像没有尺寸，因此您必须使用源（字面意思）创建一个新的图像对象，然后在图像加载后从中获取尺寸

$(document).ready(function () {
    $('.normal-slides').bxSlider({
        mode: 'fade',
        auto: false,
        pager: false
    });


    $('.normal-slides img').each(function () {
        var img = this;
        var new_img = new Image();
        new_img.onload = function() {
            console.log('imgWidth = ' + this.width)
            console.log('imgHeight = ' + this.height)
        }
        new_img.src = img.src;
    });
});

Answer 2

试试类似的东西

$('.slider img').each(function(){
    $this = $(this);
    var imgWidth = $this.width();
    var imgHeight = $this.height();

    console.log(imgWidth);
    console.log(imgHeight);
});

Fiddle