javascript - dynamic img-src with placeholder image -


i have following predicament. unfortunately can't share plunkr image coming protected site , not aware of open url serves changing images. can't switch local animated image needs on external server demonstrate problem. concept pretty straight forward.

i have following url using display image. server sending image changing image @ approximately 3 frames per second.

<img ng-src="{{logindata.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitorid}}&maxfps=3&buffer=1000&user={{logindata.username}}&pass{{logindata.password}}&rand={{rand}}" width="100%" style="backgroundimage:url('http://placeholder.com/placeholder.jpg');"/>

now here problem: -- want show place holder text or image following instances: a) sometimes, takes time server render first frame b) server not seem send images

what want avoid screen not remaining blank - confuses user

the problem facing moment img-src start, screen turns white , in few seconds images start streaming (situation above) or screen remains blank long time (situation b)

i've tried various methods: a) see in code above, i've tried background image. shows if error returned img-src (for example, forcibly change url invalid 1 or not reachable). happening me shows momentarily, moment img-src encountered screen turns white (till images start coming server)

b) i've tried various methods including app.directive global image trap method in if ngsrc path resolves 404, there way fallback default?

but core problem situation not involve error in image. seems if server gets stuck or delayed not returning error in http ==> , in duration, window image turns white. , i'd solve putting in text on top of (or image on top of it), till real images start being received.

thank

for own need, made directive displaying placeholder image if servers has error :

.directive('placeholderimg', function() {     //default place holder     return {         restrict: 'a',         link: function(scope, element, attr) {             var img = window.scriptroot + 'img/divers/avatar_min.jpg';             if (attr.placeholderimg) {                 switch (attr.placeholderimg) {                     case 'profile':                         img = 'img/avatar.png';                         break;                     case 'profile_small':                         img = 'img/avatar_min.png';                         break;                     case 'profile_large':                         img = '/img/nothumb.png';                         break;                     //add more placeholders                 }              }              //if ngsrc empty             if (!attr.ngsrc)                 element[0].src = img;              //if there error (404)             element.on('error', function() {                 element[0].src = img;             });          }     }; });

and use this:

<img data-ng-src="{{app.picture}}" data-placeholder-img="profile_large">

i understand main issue want display while image loading. maybe can modify directive, set element[0].src placeholder @ beginning of code , overloading binding load event once it's loaded (the same way have bound error event).


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more