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

将每个单独的功能放入内容框中，您通常会在其中放置与特定图像关联的文本。一旦图像加载，它将显示适当的高度。图像仅在转盘/滑块行程中的个别时间加载。

Answer 2

事实证明，bootstrap文档提供了一种在幻灯片显示时访问幻灯片内容的方法：

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

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

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

获取Bootstrap Carousel幻灯片的图像宽度

2 个答案: