revillweb / angular-preload-image Goto Github PK

This does not work
<img class="my-image" preload-image default-image="default.jpg" fallback-image="error.jpg" ng-src="my-image.jpg"/>

This works
<img class="my-image" ng-src="my-image.jpg"/>

my-image.directive.js

function myImage () {
	return {
		restrict: 'C',
		link: function (scope, $element, attrs) {
			$element.on('load error', function () { // this line is not triggered
				doSomethingWhenTheImageIsLoaded();
			});
		}
	};
}

myImage.$inject = [];
angular.module('chat').directive('myImage', myImage);

How do I know image finished loading? You said directive have ability to know when all pre-loaded images have finished loading within the page

i noticed that ng-click works no more when i use this plugin with it on img tag

eg:

<img preload-image ng-src="{{item.imgUrl}}" default-image="../img/thumb2.png" fallback-image="{{item.imgUrl}}" ng-click="addToOrder(item)" />

The function addToOrder doesnt get executed on click

As the tittle says, the minified version doesn't match the lasted version. Plus doesn't work.

When trying to load the package here: https://rails-assets.org/components/new I get the message no version number defined. I get the same error when specifying as a dependency in bower.json. Any chance we might add a version in the bower repository?

Thanks for sharing such a useful library!

It depends on 1.3.x, any plans on making it work with 1.4?

How do I know image finished loading? You said directive have ability to know when all pre-loaded images have finished loading within the page

When I'm trying to use the tag for an image, that has already been preloaded once in a different view, the image is not being displayed. Only when I remove the preload-image directive from the tag and only use ng-src the image is being displayed immediately. Generally speaking this behavior is fine, but I always have to remember which image is already pre-loaded.

I am using this great module but can not get it to work.
only shows me the image set in fall , I'm getting data from a REST API , and I think the view is loaded before the data is downloaded and later

<div class="hero slide-up"  preload-bg-image="
{{local.featured_image.attachment_meta.sizes.large.url}}" 
default-image="../img/material-graphite.jpg" 
fallback-image="../img/material3.jpg"></div>

controller

    $http({
        method: 'GET',
        url: 
    }).
    success(function (data, status, headers, config) {
         $scope.local = data;}

When you create the new image in the preLoader service you attach the 'load' and 'error' event handlers. As far as I know (and tested), these listeners need to be cleaned up otherwise you'll be left with a leak.
Something like this worked for me:

var preloaderImage = angular.element(new Image());
preloaderImage.on('load', function () {
      preloaderImage.off();
      successCallback();
}).on('error', function () {
      preloaderImage.off();
      errorCallback();
}).attr('src', url);

Hi there,
I really like the directive thanks very much for your work.
I just thought I should report that the terminal property of the preloadImage directive can break other directives really badly. Both "ui-sref" from the ui.router module and "on-touch" from Ionic are broken when "preload-image" is applied to the same element. I'm sure there's a reason you've included this property, however I've removed it in this fork and have had no adverse effects so far.

any love for npm support?