0
anglejsの新しい開発者として、プロバイダに関する特定の質問があります。スクロール可能なコンテナに関する特定の機能を持つ遅延ロードangular-lazy-loadを使用しようとしています。このスクロール可能なコンテナは、設定ステップで設定する必要があります。ここで は一例です：コントローラで生成された動的スクロール可能なコンテナを使用して、サービスangle-lazy-imgをコンフィグレーションします。
var myApp = angular.module('myApp', ['angularLazyImg']);
myApp.config(['lazyImgConfigProvider',
function(lazyImgConfigProvider) {
var scrollable = document.querySelector('.container');
lazyImgConfigProvider.setOptions({
offset: 1, // how early you want to load image (default = 100)
errorClass: 'error', // in case of loading image failure what class should be added (default = null)
successClass: null, // in case of loading image success what class should be added (default = null)
onError: function(image) {}, // function fired on loading error
onSuccess: function(image) {}, // function fired on loading success
container: angular.element(scrollable)
});
}
]);
myApp.controller('lazyCtrl', ['$scope',
function($scope) {
$scope.images = [{
url: "https://cdn.sstatic.net/stackoverflow/img/[email protected]?v=73d79a89bded&a"
}, {
url: "http://www.skrenta.com/images/stackoverflow.jpg"
}, {
url: "http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"
}, {
url: "http://gillespaquette.ca/images/stack-icon.png"
}, {
url: "http://www.iconsdb.com/icons/preview/black/stackoverflow-3-xxl.png"
}, {
url: "https://avatars0.githubusercontent.com/u/139426?v=3&s=400"
}, {
url: "http://gillespaquette.ca/images/stack-icon.png"
} ];
}
]);.container {
overflow: scroll;
height: 200px;
position: absolute;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/Pentiado/angular-lazy-img/master/release/angular-lazy-img.js"></script>
</head>
<body ng-app="myApp">
Test lazy image
<div ng-controller="lazyCtrl">
<div class="container">
<div ng-repeat="image in images">
<img width="100px" height="100px" lazy-img="{{image.url}}" />
</div>
</div>
</div>
</body>しかし、私の質問は、私はコンテナ要素がまだ作成されていない場合は、コンテナのオプションを追加して行うことができ、コントローラによってものになるかどうかですか？
ありがとうございます。お答えできない情報をお知らせください。
githubの問題4が見つかりました。私のコンテナにattribut lazyImgContainerを追加しようとします。https://github.com/Pentiado/angular-lazy-img/issues/4 – jup31