2

特定のタグでフィルター処理された Instagram の写真を使用する AngularJS を使用してスライドショー アプリを作成しました。これがデモとGitHub リポジトリです。

AngularJS の原則に従って、これらの画像をループする最も効率的な方法は何ですか?

現在$timeout、最初の要素を配列の一番下に移動する a を、最初の要素をimages除く他のすべての画像を非表示にする CSS と組み合わせて使用​​しています。

$scope.images = [
    'image-001.jpg',
    'image-002.jpg',
    'image-003.jpg'
];

$timeout( function advanceSlide() {
    $scope.images.push( $scope.images.shift() );
    $timeout( advanceSlide, 6000 );
);

デモ: http://jsfiddle.net/YruT6/1/

もう 1 つのオプションは、ここに示すphotosように、オブジェクトをウォークしてactiveクラスを適用することです。それはリソース集約的ではないでしょうか？

4

1 に答える 1

5

ソリューションは正常に機能しますが、リピーターを使用することは、次のような最善の戦略ではない可能性があります。

  • すべての画像は常にDOMにあります
  • リピーターを使用してアレイを操作すると、リピーターの再計算とDOMの再シャッフルが発生します。

したがって、より大きなスライドショーの場合、DOMには多くの要素があり、頻繁に/遅いDOM操作が行われます。私は別のアプローチを提案することができます：

$scope.imgIndex = 0;
$timeout(function advanceSlide() {
    $scope.imgIndex = ($scope.imgIndex + 1) % $scope.images.length; 
    $timeout(advanceSlide, 1000);
});

次に、テンプレートで：

<div ng-app ng-controller="slideshow">
    <img ng-src="{{images[imgIndex].src}}">
</div>​

これがjsFiddleです：http：//jsfiddle.net/ThmeZ/6/

于 2012-11-26T11:34:06.723 に答える