Bootstrap Carousel 滑块不会等到下一张图片加载成功答案

【问题标题】：Bootstrap Carousel slider does not wait until next image is loaded successfullyBootstrap Carousel 滑块不会等到下一张图片加载成功
【发布时间】：2014-12-25 04:11:41
【问题描述】：

有没有办法让轮播滑块在循环效果中等待下一张图片被下载。现在我使用下面的代码进行轮播。

$('#myCarousel').carousel({
        interval:4000
});

以上代码按时间间隔工作，但不等到下一张图片完全加载。

【问题讨论】：

您在轮播中使用的图片是经过质量优化还是缩小尺寸以供网络使用的图片？
我使用了 6 张图片，所有图片的大小都在 500kb 到 700kb 之间。我在网络应用全屏幻灯片中使用图像。
500 和 700 kb 太多了。这不是一个好习惯。尝试使用质量为 60-80 的 gimp 等软件将图片保存为网络。谷歌“为网络调整和保存图片”。
我喜欢你的建议，但我需要加载高质量的 img。

标签： jquery twitter-bootstrap slider carousel

【解决方案1】：

轮播不会等到为下一张幻灯片加载图像。但你可以做的一件事是你可以在运行时生成 carousel 的 img 标签，如下所示，你可以使用它的 onload 事件：

var theImage = new Image();
theImage.src = encodeURI(ImagePath);
theImage.onload = function () {
    $('#myCarousel').carousel('next')      \\this statement will slide to next after image is loaded
}
$('body').append(theImage);

【讨论】：

感谢 Innodel，我在循环中实现了您的代码，当我转到最后一个图像时执行 $('#myCarousel').carousel("cycle");