Question

我想添加bootstrap CAROUSEL延迟加载，如下例所示：

 <img data-lazy-load-src=

但我使用ng-src（angularjs）

获取滑块中的imgs

我如何处理此示例以使用具有延迟加载的角度引导滑块

Answer 1

尝试我做了这个逻辑后

HTML

<div ng-app='App'  ng-controller='test' ng-init='imgSliderIndex =0'>
    <button id='more' ng-click="imgSliderIndex = check(imgSliderIndex + 1 );"> more</button>
    <img ng-src='{{imges[imgSliderIndex].path}}'>   
</div>

Angularjs：

var app = angular.module('App',[]);

app.controller('test', ['$scope', function($scope) {
  $scope.imges = [
    {
        name: "Image 1",
        path: "http://demo.averta.net/themes/lotus/agency/wp-content/uploads/2012/10/slider8.jpg"
    },
    {
        name: "Image 2",
        path: "http://demo.smartaddons.com/extensions/joomla17/cache/mod_sj_content_slider/cc021ca251f443c4a934cba184872eff.jpeg"
    },
    {
        name: "Image 3",
        path: "http://demo.averta.net/themes/lotus/agency/wp-content/uploads/2012/10/slider10.jpg"
    }
];

$scope.check = function(value) {
    if ( $scope.imges.length > value) {
       return value;
    }else{
        return 0 ;
    }
}
}]);

Answer 2

你可以使用带有ng-src的img，只有在达到那张幻灯片时才会显示网址，如下所示：

<img ng-src="{{$index == carouselActive && 'http://www.google.com/image.jpg' || ''}}"/>

其中$ index是当前幻灯片，carouselActive是显示的幻灯片。

具有延迟加载angularjs的bootstrap滑块

2 个答案: