Geek Answers Handbook

How to show placeholder image before loading real image?

The idea is to show the low resolution version of the image before the real high resolution image is loaded, ideally with the img tag.

<img lowres="http://localhost/low-res-image.jpg" ng-src="http://localhost/low-res-image.jpg">

A low resolution image will be visible first and will be replaced with a high resolution after it is downloaded. How can this be done? Is it possible to edit the img.src attribute or create something else (for example, a wrapper div with a background or another temporary div)?

+8
source share
6 answers

You might want to create a directive, in fact I will find it as an attribute, so by default it starts with lores.

JS:

 app.directive('hires', function() { return { restrict: 'A', scope: { hires: '@' }, link: function(scope, element, attrs) { element.one('load', function() { element.attr('src', scope.hires); }); } }; });

HTML:

 <img hires="http://localhost/hi-res-image.jpg" src="http://localhost/low-res-image.jpg" />
+22
source

Because ng-src is going to replace everything in src , why not use both?

 <img src="img/placeholder.jpg" ng-src="{{actualone.img}} " height="150px " width="300px ">

Use regular src for your placeholder. It will be replaced with a single image for ng-src.

+12
source

The above answer is misleading, and here's why. You need to cancel the load event, as this will cause an infinite load cycle on desktop and mobile browsers, if you run it in the ng-repeat directive, each src replacement will cause a new load event and, therefore, replace the image, etc. The above answer caused my application to break not only performance, but also caused crashes on mobile devices until I added unbind.

 .directive('imageloaded', function () { return { restrict: 'A', scope:{imageloaded:'@'}, link: function postLink(scope, element, attrs) { element.bind('load', function() { //console.log('load fired') <- just console log it and comment the unbind and you will see the 10000s of console logs. element.attr('src', scope.imageloaded); element.unbind('load'); }); } };

});

+4
source

You can change the src attribute of an image after loading it. you need to associate the upload event with the image to find out when the image is loaded.

See this page Detecting Image Upload Using jQuery

You can use the directive to set the initial src attribute and bind the load event to change src to the main image.

+1
source

A simple example. try this without using directives
HTML

 <img ng-src="{{loading.image_url}}" >

Javascript

 //within controller $scope.loading.image_url = 'path_to_loading_image'; var loaded_img = 'path_to_loaded_image'; $http.get(loaded_img).then(function() { $scope.loading.image_url = loaded_img; }, function() { console.log('something went wrong!'); });
+1
source

I found this simple solution.

 <img ng-src="{{::val.image}}" width="400" height="300" alt="" onerror="this.src='img/logo-sm.png'" src="img/logo-sm.png">

Hope this helps somenone

0
source

More articles:


All Articles