異なる要素でトリガーされたいくつかのイベントを聴いた後のトリガー関数

Question

私はangularJs指示が完了して終了するのを待つローダーを使用しています。 逆も正確です。私の指示が最初に終わると、ページが表示される前にimgローダーが来なければなりません。 は、ディレクティブはその実行を終了することをした後、私はすべてのimgがロードされるのを待っている、あまりにもjQueryプラグインを使用してい

$timeout(function() { 
    var DirectivesEnded = new Event('DirectivesEnded'); 
    document.dispatchEvent(DirectivesEnded); 
}, 5000); 

角度$タイムアウトを使用してDOMイベントを放送しています。

$images = $("img"); 
imagesLoaded($images).on('done', function (instance, image) { 

}); 

両方のイベントがトリガーされた後、これらの行のコードを実行して、ローダーのhtmlレイヤーを消したいと思います。

$(".lazy-load").animate({ 
    'opacity': 0 
    }, 300, "linear", function() { 
    setTimeout(function() { 
     $(".lazy-load").hide(); 
    }, 10); 
    }); 

これらのイベントと機能の両方が別々に実行されています。しかし、私の目的はそれらの両方を組み合わせることです。誰もがこれを行う方法を考えている？あなたはデータのみを取得する前に、簡単なローダーを表示したい場合は

Answer 1

私はよくあなたの質問を理解している場合

var check_sum = 0; 
$timeout(function() { 
    var DirectivesEnded = new Event('DirectivesEnded'); 
    document.dispatchEvent(DirectivesEnded); 
    check_sum++; 
    finished(); 
}, 5000); 

$images = $("img"); 
imagesLoaded($images).on('done', function (instance, image) { 
    check_sum++; 
    finished(); 
}); 


function finished() { 
    if(check_sum==2) check_sum=0; 
    else return; 
    $(".lazy-load").animate({ 
    'opacity': 0 
    }, 300, "linear", function() { 
    setTimeout(function() { 
     $(".lazy-load").hide(); 
    }, 10); 
    }); 
} 

Answer 2

、あなたは、単に角度の方法を使用してこれを実現することができ、コードは以下のようなものが考えられます。

<div ng-show="ctrl.loading" ng-include="'assets/templates/loader.tpl.html'"> Loading ... </div> 
<div ng-hide="ctrl.loading">Content</div> 

//In controller, set ctrl.loading to false after fetching the data.