Angular's ng-src keeps previous model until it preloads image internally. I am using different image for the banner on each page, when I switch routes, i change main view, leaving header view as it is, just changing bannerUrl model when I have it.
This is resulting in seeing previous banner image while new one is loading.
I was surprised that there's no directive for it yet, but I wanted to make a discussion before trying to build one.
What I want to do I think is have banner model on custom attribute. like:
<img preload-src="{{bannerUrl}}" ng-src="{{preloadedUrl}}">
Then $scope.watch for bannerUrl change, and as soon as it changes, replace ng-src with loader spinner first, and then create temproary img dom element, preload image from preload-src and then assing it to preloadUrl.
Need to think how to handle multiple images too for galleries for example.
Does anyone have any input on it? or maybe someone can point me to existing code?
I've seen existing code on github that uses background-image - but that doesn't work for me as I need dynamic height/width as my app is responsive, and I cannot do it with background-image.
Thank you
Having the 2 urls on the directive seems a touch overcomplicated. What I think is better is to write a directive that works like:
<img ng-src="{{bannerUrl}}" spinner-on-load />
And the directive can watch ng-src and (for example) set visibility:false with a spinner until the image has loaded. So something like:
scope: {
ngSrc: '='
},
link: function(scope, element) {
element.on('load', function() {
// Set visibility: true + remove spinner overlay
});
scope.$watch('ngSrc', function() {
// Set visibility: false + inject temporary spinner overlay
});
}
This way the element behaves very much like a standard img with an ng-src attribute, just with a bit of extra behaviour bolted on.
If anyone is interested this is my final solution: I use twitter bootstrap. So added class of "fade" to all images and just toggling class "in" with directive to fade in and out when image is loaded
angular.module('myApp').directive('imgPreload', ['$rootScope', function($rootScope) {
return {
restrict: 'A',
scope: {
ngSrc: '@'
},
link: function(scope, element, attrs) {
element.on('load', function() {
element.addClass('in');
}).on('error', function() {
//
});
scope.$watch('ngSrc', function(newVal) {
element.removeClass('in');
});
}
};
}]);
<img img-preload class="fade" ng-src="{{imgSrc}}">
Working example: http://ishq.org
Just to share ^^
//css
.media-box{
position: relative;
width:220px;
height: 220px;
overflow: hidden;
}
.media-box div{
position: absolute;
left: 0;
top: 0;
}
.spinner{
position: absolute;
left: 0;
top: 0;
background: #CCC url(./spinner.gif) no-repeat center center;
display: block;
width:220px;
height: 220px;
}
.feed img.spinner-show{
visibility: visible;
}
.feed img.spinner-hide{
visibility: hidden;
}
//html
<div class="media-box">
<div>
<img data-ng-src="{{item.media}}" alt="" title="" data-spinner-on-load>
</div>
</div>
//js
.directive('spinnerOnLoad', function() {
return {
restrict: 'A',
link: function(scope,element){
element.on('load', function() {
element.removeClass('spinner-hide');
element.addClass('spinner-show');
element.parent().find('span').remove();
});
scope.$watch('ngSrc', function() {
element.addClass('spinner-hide');
element.parent().append('<span class="spinner"></span>');
});
}
}
});
Instead of using
element.on('load', function() {});
use imagesLoaded plugin. It will speed up dramatically your images.
So the final code would be:
link: function(scope, element) {
imagesLoaded(element, function() {
});
scope.$watch('ngSrc', function() {
});
}
If you want you can pass the image fail and image loader as attributes for the directive....
myApp.directive("mySrc", function() {
return {
link: function(scope, element, attrs) {
var img, loadImage;
var IMAGE_LOAD="123.jpg";
var IMAGE_FAIL="123.jpg";
img = null;
loadImage = function() {
element[0].src = IMAGE_LOAD;
img = new Image();
img.src = attrs.mySrc;
img.onload = function() {
element[0].src = attrs.mySrc;
};
img.onerror=function ()
{
element[0].src = IMAGE_FAIL;
}
};
loadImage();
}
};
});
A simple solution I've found is to change the url to '//:0' before assigning it's new value
$scope.bannerUrl = 'initial value';
// When we want to change it
$scope.bannerUrl = '//:0'; // remove the previous img so it's not visible while the new one loads
$scope.bannerUrl = scope.preloadedUrl