Lazy Loading With AngularJS

HTML

<div style="display: none" angular-lazy-load class="photos portfolio-item item-{{$index}}" ng-repeat="item in items | filter:filter_alphabet:startsWith" ng-cloak>
        <div class="p-inner background-delay" data-img="{{item.p_details.hover_bg}}"><div class="border">
		<div class="item-content">
			<div class="logo-cont">
				<span>
				        <img src="{{item.p_details.logo}}" />
				</span>
			</div>
			<div class="p-text">
				<h2 class="p_title">{{item.post_title}}</h2>
				<p>{{item.p_details.phone_num}}</p>
			</div>
		</div>
	</div>
</div>

Scripts

var myApp = angular.module('soccerCampApp', ['angular-lazy-loader']);

myApp.controller('CtrlPortfolio', ['$scope', function($scope) {
	//codes here
});

Download and include lazy-loader.min.js.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *