0

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

2 回答 2

0

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

于 2013-11-02T19:02:34.913 回答
0

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

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

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

    console.log($('.item:eq('+idx+') img').width());
})
于 2013-11-04T21:39:36.897 回答