Question

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

以下是我的代码示例：

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

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

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

})

我也尝试将它们放在这样的on load函数中：

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

尝试类似的东西

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

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

Fiddle

Answer 2

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

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

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

2 个答案: