获取引导轮播幻灯片的图像宽度答案

【问题标题】：Getting Image Width of Bootstrap Carousel Slides获取引导轮播幻灯片的图像宽度
【发布时间】：2013-11-06 01:53:27
【问题描述】：

我需要获取加载到轮播中的每个图像的宽度，以便在图像上浮动徽标并进行一些 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);
});

【问题讨论】：

标签： jquery twitter-bootstrap carousel

【解决方案1】：

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

【讨论】：

【解决方案2】：

事实证明，引导文档提供了一种访问幻灯片内容的方法：

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

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

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

【讨论】：