Display an image only when it is fully downloaded and rendered in AngularJS

Question

I'm using AngularJS to display an image. The image's height and width is dynamic depending on the browser's height and width. How can I only display a div that contains the image only when the image is ready to be displayed?

<div id="container">
  <img ng-src="{{media_list.cur}}" />
</div>

Do I need to use jQuery for this? I'd like to do as much as possible without any additional libraries (maybe I can use AngularJS's built-in jqlite or something)

fxck · Accepted Answer · 2014-07-26 16:47:11Z

2

Something like this might work.

app.directive('img', function() {
  return {
    restrict: 'E',
    link: function(scope, el, attrs) {
      el.addClass('hide');

      el.on('load', function() {
        el.removeClass('hide');
      });
    }
  }
});

edited Jul 26, 2014 at 16:47

answered Jul 26, 2014 at 16:36

fxck

4,9088 gold badges59 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ensnare Over a year ago

Thanks. Do you have an example of what the CSS & HTML components might look like?

fxck Over a year ago

<img src="path/to/img.jpg"> & img.hide { display: none; } or whichever method of hiding the image you prefer, opacity, visibility etc

jyek · Accepted Answer · 2014-07-26 16:34:12Z

1

Believe you can use the onload property if you want to avoid jQuery:

img.onload = function() {
  // image is loaded
}

answered Jul 26, 2014 at 16:34

jyek

1,0911 gold badge9 silver badges19 bronze badges

3 Comments

Matt Ellen Over a year ago

You have to get the img elements from the DOM too, but this would work.

ensnare Over a year ago

Thanks. Do you have an example of what the HTML/CSS would look like as well?

Whisher Over a year ago

@jyek el.on if jquery is not avaible is not jquery but jqLite see docs.angularjs.org/api/ng/function/angular.element

Collectives™ on Stack Overflow

Display an image only when it is fully downloaded and rendered in AngularJS

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related