引导旋转木马幻灯片图像宽度的获取

Question

我需要获得每个图像的宽度加载到旋转木马，以便浮动一个标志在图像上，并作出一些CSS调整。使用的jQuery只获取第一张幻灯片的宽度，其他所有幻灯片返回的宽度为0。我想可能Bootstrap Carousel是延迟加载图像，但是"load()“函数似乎根本无法实现。我怎样才能得到所有图像的宽度？

一个小提琴在这里说明了问题：http://jsfiddle.net/7SwtW/6/

console.log($('.item:eq(0) img').width()); //gets the correct width: 301
console.log($('.item:eq(1) img').width()); //gets 0
console.log($('.item:eq(2) img').width()); //gets 0

$('.item:eq(0) img').load(function () {
    //doesn't get here        
    imgWidth = $(this).width();
    console.log(imgWidth);
});

$('.item:eq(1) img').load(function () {
    //doesn't get here        
    imgWidth = $(this).width();
    console.log(imgWidth);
});

$('.item:eq(2) img').load(function () {
    //doesn't get here        
    imgWidth = $(this).width();
    console.log(imgWidth);
});

Answer 1

结果显示，引导文档提供了一种访问幻灯片内容的方法，如下图所示：

$('#myCarousel').on('slide.bs.carousel', function () {

    var idx = $('#myCarousel .item.active').index();

    console.log($('.item:eq('+idx+') img').width());
})

Answer 2

将每个单独的函数放入内容框中，您通常会将与特定图像相关联的文本放在其中。一旦该图像加载，它将显示适当的高度。图像仅在卡索/滑块行程期间的单个时间内加载。