Preload obrázkov v Angular APP

Určite ste sa v svojej praxi prehliadania web stránok stretli s tým, že sa obrázok načítaval pomaly a pomaly sa ukazoval z hora na dol.V tomto článku s ukážme príklad pred-načítania obrázku a následné jeho zobrazenie. V príklade si na miesto kde sa obrázok bude načítavať implementujeme gifko – loader. 

Čo budeme potrebovať?

Html, css a angularJS

Celý kód: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.loader{
background: url('URL GIF LOADER OBRÁZKU') no-repeat center center ;
background-size: 50px;
}
.hide{
display: none;
}.box{
width: 200px;
height: 150px;
border: 1px solid black;
margin: 10px;
float: left;
}

.box img{
width: 200px;
height: 150px;
}
</style>

</head>
<body ng-app="app">

<div class="box">
<img ng-src="URL OBRÁZKU" imgpreload />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript">

var app = angular.module('app', []);

app.directive('imgpreload', function() {
return {
restrict: 'A',

link: function(scope, element, attrs) {
element.on('load', function() {
element.parent('div').removeClass('loader')
element.removeClass('hide');
});

scope.$watch('ngSrc', function() {
element.parent('div').addClass('loader');
element.addClass('hide');
});
}
};
});
</script>
</body>
</html>

Kontaktujte nás

+421 948 633 959
info@becrea.sk

Pre klientov

helpdesk@becrea.sk

Klientská zóna

App_[BE]Klient

Naše služby

Tvorba web aplikácií
Tvorba moderných E-shopov
Tvorba mobilných aplikácií
SEO a PPC kampane
Sociálne siete (fb,tw,.)
Kreativita a grafika
Testovanie obsahu
Analýza web stránky

Naši spokojní klienti

Medzi našich klientov patrí Limousin travel s.r.o., Gastro Power Job s.r.o., IDOMASTER s.r.o., E&N Autoparts, s.r.o., EKOAUTO s.r.o., East Slovakia Travel, BOZPO - BJ, s.r.o. a ďalší, pridajte sa k naším spokojným klientom. Ďakujeme za prejavenú dôveru.

© 2018 S [BE]CREA