javascript - bx slider - 获取图像的高度和宽度

Question

我试图获取 bx slider 幻灯片中图像的高度和宽度，问题是每个图像(没有加载的第一个图像)都返回零。

这是我的代码示例:

$('.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);

 }
})

...但仍然无法正常工作=\

任何帮助将不胜感激!

编辑:

这是一个 fiddle :http://jsfiddle.net/a3BUA/1/

编辑2:

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

Answer 1

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

$(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;
    });
});