<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Lazy loading images with attribute directives</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="main">
<br/>
<h4>Simple example for lazy-loading Hi-Res images with attribute directives</h4>
<p>The img load first the thumbnail image with "my-thumb" directive.
</p>
<p>The hi-res images (in "my-image" directive) are loaded outside from DOM. When the image is clicked, it's "active-image" attribute changes to TRUE, and then the hi-res image replace the thumbnail image.</p>
<a href="kaikreations.blogspot.com.es">Visit my blog for more tutorials</a>
<br/><br/>
<div ng-repeat="image in images" style="vertical-align: top;">
--------- {{$index}} ---------<br/>
<div class="my-img" my-thumb="{{spinnerURL}}" my-image="{{image}}" my-center-bg
active-image="{{activeImages[$index]}}" ng-click="switchActiveValueOnImage($index)" >
</div>
</div>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-kaik-/lazy-loading-images-with-attribute-directives-gbOzZp */
.my-img{
width: 200px;
height: 200px;
}
/*Downloaded from https://www.codeseek.co/-kaik-/lazy-loading-images-with-attribute-directives-gbOzZp */
angular.module("myApp", [])
.controller("main", function($scope) {
$scope.spinnerURL = "https://38.media.tumblr.com/bec5933eea5043acf6a37bb1394384ab/tumblr_meyfxzwXUc1rgpyeqo1_400.gif";
$scope.images = ["http://critterbabies.com/wp-content/gallery/kittens/803864926_1375572583.jpg",
"http://kpbs.media.clients.ellingtoncms.com/img/news/tease/2014/08/20/Cute_grey_kitten.jpg",
"http://upload.wikimedia.org/wikipedia/commons/a/a5/Red_Kitten_01.jpg",
"http://www.androscogginanimalhospital.com/blog/wp-content/uploads/2013/12/kitten-photo.jpg",
"http://upload.wikimedia.org/wikipedia/commons/d/d3/Little_kitten.jpg",
"http://www.sfgov2.org/ftp/uploadedimages/acc/Adoption_Center/Foster%20Kitten%2012007.jpg",
"http://upload.wikimedia.org/wikipedia/commons/b/bd/Golden_tabby_and_white_kitten_n01.jpg",
"http://fc01.deviantart.net/fs45/f/2009/060/e/e/Kitten_and_Faucet_no__3_by_Mischi3vo.jpg",
"http://miriadna.com/desctopwalls/images/max/Grey-kitten.jpg",
"http://img1.wikia.nocookie.net/__cb20140227161247/creepypasta/images/f/f0/Cats-and-kittens-wallpapers-hdkitten-cat-big-cat-baby-kitten-sleep-2560x1024px-hd-wallpaper--cat-umizfbaa.jpg"
]
$scope.activeImages = [false,
false,
false,
false,
false,
false,
false,
false,
false,
false
]
$scope.switchActiveValueOnImage = function(index)
{
$scope.activeImages[index] = !$scope.activeImages[index];
}
})
.directive('myThumb', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
if(attrs.myThumb)
{
element.css({
'background-image': 'url(' + attrs.myThumb + ')',
});
}
}
}
})
.directive('myCenterBg', function(){
return{
restrict: 'A',
link: function(scope, element, attrs) {
element.css({
'background-size': 'cover',
'background-repeat': 'no-repeat',
'background-position': 'center center',
});
}
}
})
.directive('myImage', function() {
return {
scope: {},
restrict: 'A',
link: function(scope, element, attrs) {
if(attrs.myImage){
scope.img = new Image();
scope.img.onload = function(){
if(scope.active){
element.css({
'background-image': 'url(' + this.src + ')'
});
}
}
scope.img.src = attrs.myImage;
if(attrs.activeImage)
{
scope.active = false;
attrs.$observe('activeImage', function(isActive){
scope.active = scope.$eval(isActive);
if(scope.active)
{
element.css({
'background-image': 'url(' + scope.img.src + ')'
});
}
});
}
else
{
scope.active = true;
}
}
}
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.2.26
