divの背景画像が表示されるまでAngularjsが待機する

Question

私は$http.postコールのデータを取得して$scope.dataに保存する次のようなものを持っています。背景画像は、画面上行う前.pageBackgroundクラスがロードされますされ、通常の何が起こる

<div ng-repeat="key in [] | range:data.pages"> 
    <div class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}"> 
    <!-- some random stuff here --> 
</div> 

。私はbackground-imageが実際にロードされるまで何も表示しないようにしたいと思いますが、私はそれを理解することができませんでした。

誰にも提案はありますか？

Answer 1

画像が読み込まれるまで、起動機能を遅らせることができます。

var img = new Image(); 
    img.onload = function(){ 
    loadData(); 
    }; 
    img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 

はその後、HTMLでng-if="imageLoaded"を入れて、loadData機能でtrueにすることを設定します。

Answer 2

あなたの問題の本当の解決策があるかどうかはわかりません。回避策は、this answerで説明されているように、Imageオブジェクトを使用することです。ディレクティブとたとえば：

angular.module("yourModule").directive("showOnceBackgroundLoaded", [function() { 
    return { 
    restrict: "A", 
    scope: false, 
    link: function (scope, element, attributes) { 
     element.addClass("ng-hide"); 
     var image = new Image(); 
     image.onload = function() { 
     // the image must have been cached by the browser, so it should load quickly 
     scope.$apply(function() { 
      element.css({ backgroundImage: 'url("' + attributes.showOnceBackgroundLoaded + '")' }); 
      element.removeClass("ng-hide"); 
     }); 
     }; 
     image.src = attributes.showOnceBackgroundLoaded; 
    } 
    }; 
}]); 

使用：ここで

<div ng-repeat="key in [] | range:data.pages"> 
    <div class="pageBackground" id="page_{{ (key+1) }}" show-once-background-loaded="/images/{{data.id}}/{{(key+1)}}.png"> 
    <!-- some random stuff here --> 
</div> 

Answer 3

を背景として、あなたのイメージを埋め込み、画像が読み込まれた後まで、自分自身を表示するために待機ディレクティブです。異なるイメージ（ng-repeatの中からなど）を生成するために、必要に応じて "mysrc"パラメータ内に変数を含めることができます。

angular.module('foo', []) 
 
    .directive('myPageBackground', function() { 
 
    return { 
 
     scope: { 
 
     key: '=', // used for ID of the element; if you set the ID externally to the directive you could omit this 
 
     mysrc: '=' // used for the URL of the desired background image 
 
     }, 
 
     template: '<div ng-show="showMe" class="pageBackground" id="page_{{key}}" ng-style="{\'background-image\':\'url({{mysrc}})\'}"></div>', 
 
     link: function(scope) { 
 
     var img = new Image(); 
 
     img.onload = function() { 
 
      scope.showMe = true; 
 
      scope.$apply(); 
 
     }; 
 
     img.src = scope.mysrc; 
 
     } 
 
    } 
 
    });

.pageBackground { 
 
    width: 200px; height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="foo"> 
 
    <!-- Done with hardcoded values here, just for demo: --> 
 
    <div my-page-background key="'1'" mysrc="'http://placehold.it/200x200'"></div> 
 
    <div my-page-background key="'2'" mysrc="'http://placehold.it/150x150'"></div> 
 
    <div my-page-background key="'3'" mysrc="'http://placehold.it/100x100'"></div> 
 
</div>

Answer 4

あなたが常に同じclass="pageBackground"を使用している場合は、あなたの背景画像は常に同じです。あなたは隠された画像でそれを読み込むことができますので、ブラウザはそれをキャッシュ：

<img src="url" style="display:none;"/> 

または、ページのロードにJavaScriptを使用してプリロード：

var img = new Image(); 
img.src = 'some url'; 

私は信じて、そのポストは間違いなく起こるユーザインタラクション、とトリガされますページが読み込まれた後、画像が既にブラウザに表示され、適用時にすぐに表示されますclass="pageBackground"

Answer 5

divの代わりにngSrcディレクティブを使用できます。さらに、ng-lazy-imgのような小さなレイジーローディングイメージライブラリを使用することもできます。

私はそれが助けてくれることを願っています！

Answer 6

ここでは、Imageオブジェクトを使用した完全に機能する例を示します。

function AppCtrl($scope) { 
 
    $scope.images = [{ 
 
    src: 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg' 
 
    }, { 
 
    src: 'https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg' 
 
    }]; 
 
    angular.forEach($scope.images, function(image) { 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     $scope.$apply(function() { 
 
     image.loadedSrc = image.src; 
 
     }); 
 
    }; 
 
    img.src = image.src; 
 
    }); 
 
}

.hasSrc { 
 
    color: purple; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <div ng-controller="AppCtrl"> 
 
    <div ng-repeat="image in images" ng-class="{ hasSrc: !!image.loadedSrc }" style="background-image: url({{image.loadedSrc}})"> 
 
     <h2>THIS IS SOME TEXT BEING USED</h2> 
 
     <p> 
 
     This text is being used for illustration purposes only. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

あなたの目的に合わせて、これを適応させるのに十分な簡単なはずです。

Answer 7

あなたは、約束を助けることができます。イメージが約束どおりに読み込まれていれば、ビューはレンダリングされません。

既にこのリンクをチェックしている可能性があります。

preloading-images-in-angularjs-with-promises

おかげソリューションはこちら

Answer 8

ルック：あなたは何をすべきか

How can I tell when a CSS background image has loaded? Is an event fired?

は、あなたが同じイメージをロードする目に見えない相手要素を作成することです。そのイメージがロードされている場合にのみ（onloadイベント）、他の要素を表示します。例：

<div ng-repeat="key in [] | range:data.pages" ng-init="_imageLoaded={}"> 
    <div ng-show="_imageLoaded[$index]" class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}"> 
    <img ng-show="false" src="/images/{{data.id}}/{{(key+1)}}.png" onload="_imageLoaded[$index] = true;" /> 
    <!-- some random stuff here --> 
</div>