I am using Anuglar to set an image that will be used as a background image for my page. Currently, the image loads from top to bottom and it doesn't look great. I'd like to fade in the image (or even load the image from a blurry view to the actual image). Anything other than loading from top to bottom. Any advice on how to do this? I see other posts that show to use javascript/jquery, but I'm not sure how to integrate it into my Angular code.
Template
<body ng-controller="MainCtrl" ng-style="heroImage"> //rest of the html </body> Javascript
$scope.heroImage = { 'background': 'linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ), url('+ $scope.place["imageLink"] +')', 'background-size': 'cover', 'height': '100vh', 'background-repeat': 'no-repeat' }; 8 Answers
Answers 1
Did you try progressive jpeg ? It could be the simplest sollution.
Answers 2
If I understand correctly, what you're asking has been previously answer. Take a look at this: How can I use ng-animate with ui-view rather than ng-view?
Using the [ui-view].ng-enter & [ui-view].ng-leave, this will create a fade in animation once you enter and leave the page which works very well for every page in your web app
Answers 3
You can use another div element or just img itself wrapped by body and animate the opacity whenever you want
HTML
<body> <div id='background'> <img ng-src='yourimage' ng-class="{visible:imageVisible}"/> </div> </body> CSS
body { background: transparent; } #background > img { opacity: 0; display: fixed; //or absolute left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: -1; transition: all 1s; } #backcgound > img.visible { opacity: 1; } JS
$scope.imageVisible = true; this is good approach only for one image to show on page load but if You want multiple images to fadein then better approach will be canvas or multiple images
<body> <div id="background"> <img ng-reapeat="image in images track by $index" ng-src="image.src" ng-class="{visible:image.visible}"/> </div> </body> and then you can use $interval to change visible image by changing opacity JS
images=[{ src:'yoursrc',visible:false }, { src:'yoursrc',visible:false }, { src:'yoursrc',visible:false }, ... ] Answers 4
Provided that you are either hosting the image or that there are no CORS issues, you can wait until the image is loaded like this with Angular:
angular.module('app',[]) .controller('ctrl',function($scope){ $scope.style = { background: 'red' }; $scope.link = 'https://upload.wikimedia.org/wikipedia/en/f/f6/Not_A_Hero_Logo.png'; var image = new Image(); image.onload = function(){ $scope.$apply(function(){ $scope.style.background = 'url(' + $scope.link + ') center / contain no-repeat'; }); }; image.src = $scope.link; }) And in your HTML you would have:<div ng-style="style"></div>
Plunker: https://plnkr.co/edit/rC2IeU8bulOXB6HWlEK9?p=preview
EDIT: Directive-based approach Plunker: https://plnkr.co/edit/FRJla7MRu2JIaSYx7lTb?p=preview
Answers 5
I would highly recommend Animate.css which offers a wide variety of animations via @keyframes.
You can write super clean code and just add animation attributes inside your ng-style. Just choose the animation you like, and set the duration, and voila, you are good to go:
$scope.heroImage = { 'background': 'linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ), url("https://hd.unsplash.com/photo-1452711932549-e7ea7f129399") center', 'background-size': 'cover', 'height': '100vh', 'background-repeat': 'no-repeat', //set fadeIn as the animation, animate over duration of 1second. 'animation':'fadeIn 1s', }; Here is the working plnkr
P.s. Of course, remember to include animate.css as your stylesheets. and it will have to load before your own stylesheets.
<!--load animate.css first--> <link rel="stylesheet" href="animate.css" /> <!--Your own stylesheet--> <link rel="stylesheet" href="Site.css" /> Answers 6
You can do this with an angular directive like so:
angular.module('app', []) .directive('backgroundimg', function() { return { link: function(scope, element, attribs) { let img = new Image(), s = element[0].style; s.transition = 'background-image 1s ease-in-out'; s.backgroundSize = attribs.backgroundsize || '800px 600px'; s.backgroundImage = 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)'; //1x1px transparent gif img.onload = function() { s.backgroundImage = 'url(' + attribs.backgroundimg + ')'; }; img.src = attribs.backgroundimg; } }; }); This lets you declare your background image, which then will fade in once loaded. To fade in properly, we need to have an image to fade from. You can set your own in the element style property, or else it will default to a 1px white image.
Example HTML:
<body ng-app="app" backgroundimg="mybackground.jpg" backgroundsize="600px 400px"> If you want to fade in from a blurry picture, just add it to the style:
<body ng-app="app" backgroundimg="mybackground.jpg" backgroundsize="600px 400px" style="background-image:url(mythumbnail.gif)" /> Or even better, encode it inline first with a tool like this. (Remember to resize it first)
Other styling you can do with CSS.
Answers 7
I had similar task some time ago and resolved it with compressing jpeg images or thing called progressive jpeg
read on wikipedia about compression of JPEG
NOTE
JPEG format is best for web.
SOLUTION WORKED FOR ME
I used this service for compressing my jpeg files
Now my site works really good
Answers 8
you can use jquery loading jquery before angular and then you can use it in your controller like this
angular.module('App', []).controller('MainCtrl', function ($scope) { $(function () { // wait till load event fires so all resources are available //here you can use jquery fadeIn() }); }) for watch that jquery is loading in you browser you can open console and write $ sing and you can see if jquery is loading or it's undefined
As mentioned in comment it's not a good practice to use Jquery with angular.
0 comments:
Post a Comment