Javascript 如何停止在angularjs旋转木马中加载图像

为了提高性能，在我的应用程序中，我们使用图表作为旋转木马。因此，渲染qlik图表需要更多的时间。我只想加载第一个图像（图表），需要停止加载剩余的所有图像

• 旋转木马里只有3张图表。它总是只有3个

• 第一次加载页面时，它必须位于第一个图像中。因此，只应加载第一个图像。剩余的第2和第3个图像不应加载

• 单击“下一步”按钮后，我需要加载第二个图像。此时不加载第三个图像

• 再次单击第三个图像后，第三个图像只应加载

这三张图表是我从API获得的数据。我怎样才能做到这一点

请查看下面的plunkr以获取加载所有数据的示例

angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ngSanitize'，'ui.bootstrap']）；
角度.module（'ui.bootstrap.demo'）。控制器（'carousedemoctrl'，函数（$scope）{
$scope.myInterval=5000；
$scope.noWrapSlides=false；
$scope.active=0；
var slides=$scope.slides=[]；
风险价值指数=0；
$scope.addSlide=函数（）{
var newWidth=600+幻灯片。长度+1；
推({
图像：'//unflash.it/'+newWidth+'/300'，
文字：[“漂亮的图像”，“很棒的照片”，“太酷了”，“我爱死它了][slides.length%4]，
id:CurrendIndex++
});
};
$scope.randomize=函数（）{
var index=generateIndexesArray（）；
将新索引分配给幻灯片（索引）；
};
对于（变量i=0；i<4；i++）{
$scope.addSlide（）；
}
//随机化下面的逻辑
函数assignNewIndexesToSlides（索引）{
对于（变量i=0，l=slides.length；i

幻灯片{{Slide.id}
{{slide.text}

Quick win将在
img
标记中添加
load=“lazy”
属性-您的prev（）、next（）和select（）函数在哪里？@MoshFeu我尝试过加载=“lazy”。但它不起作用。如果一次加载3个图像，则会影响性能。所以我只想加载第一张图片。然后单击右箭头或底部点，我需要加载下一幅图像。下一个箭头或圆点相同。这是我的问题。请用PRUNKR更新