9

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'
};
sharataka
  • 5,014
  • 20
  • 65
  • 125

7 Answers7

2

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
},
...
]
Arunjith R S
  • 792
  • 12
  • 23
neuronet
  • 1,139
  • 8
  • 19
1

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.

Full Plnkr Example

jornare
  • 2,903
  • 19
  • 27
0

Did you try progressive jpeg ? It could be the simplest sollution.

daymosik
  • 140
  • 8
0

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

Community
  • 1
  • 1
Juan
  • 78
  • 5
0

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

Keegan G
  • 176
  • 4
0

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" />
CozyAzure
  • 8,280
  • 7
  • 34
  • 52
-1

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

Aren Hovsepyan
  • 1,947
  • 2
  • 17
  • 45