I all I have the following predicament. I unfortunately can't share a plunkr as the image is coming from a protected site and I am not aware of any open URL that serves constantly changing images. I can't switch to a local animated image as it needs to be on an external server to demonstrate the problem. But the concept is pretty straight forward.
I have the following URL that I am using to display an image. Now the server that is sending this image is constantly changing this image at approximately 3 frames per second.
<img ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&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 is the problem: -- I want to show a place holder text or image for the following instances:
a) Sometimes, it takes time for the server to render the first frame
b) Sometimes the server just does not seem to send images
What I really want to avoid is the screen not remaining blank - that confuses the user
The problem I am facing is that the moment img-src start, the screen turns white and in a few seconds the images start streaming (situation a above) or the screen remains blank for a long time (situation b)
I've tried various methods:
a) As you see in the code above, I've tried a background image. That only shows if an error is returned by the img-src (for example, I forcibly change the url to an invalid one or its not reachable). What is happening with me is that it shows up momentarily, but the moment img-src is encountered the screen turns white (till images start coming from the server)
b) I've tried various methods including the app.directive global image trap method in if a ngSrc path resolves to a 404, is there a way to fallback to a default?
But the core problem really is that my situation does not involve an error in the image. It seems like as if the server gets stuck or delayed but its not returning an error in HTTP ==> and in that duration, my window for the image turns white. And I'd like to solve that by putting in a text on top of it (or an image on top of it), but only till real images start being received.
Thank you
for my own need, I made a directive displaying a placeholder image if the servers has an 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 is empty
if (!attr.ngSrc)
element[0].src = img;
//If there is an error (404)
element.on('error', function() {
element[0].src = img;
});
}
};
});
And I use it like this:
<img data-ng-src="{{app.picture}}" data-placeholder-img="profile_large">
I understand that your main issue is that you want to display something while the image is loading. Maybe you can modify my directive, to set element[0].src to a placeholder at the beginning of the code and overloading it by binding the load event once it's loaded (the same way I have bound the error event).
Moving away from having most of the logic on the JS size I propose using background image in css instead. We can have a tiny little icon on top of a grey background as our placeholder and then when the image url has loaded we use the power of zindex to overlay the image on top of the color and icon. I wrote a post about it here.
Related
I have a project in Angular CLI, it has the lft menu (where I store some navigation and user informations include user image. On the right side there is other part of page.
I have a feature that user can change his image. Its working like charm but when I change it, the picture in the left menu is old one (the URL is the same, when I past URL to the browser I can see the new image). I guess its becouse the left panel wont refresh when I upload new image si It has cache of old image.
Is there any way how to solve it? Something like force component to refresh, delete image cache etc?
If I understand, the browser doesn't do request to image, because it's cached. It's because image path is the same.
So you can put timestamp to image path at the end:
// <img [src] = '/path/to/image?timeStamp=123123' />
class SomeComponent{
imageSrc: string = '/path/to/image';
// getTimeStamp(): number{
// return Date.now();
// }
// or call this when you need update image
updateImageSrc(): string{
this.imageSrc= `/path/to/image?timeStamp=${Date.now()}`
}
}
Update:
<img [src] = "imageSrc" />
Code example. Look at network tab
I try to display some images on canvas that should displayed on click event. And everything seems ok, but I found some bug, that I cannot fix for a long. Bug is that on the first page opening lamp image does not display. It can be reproduced by following steps:
Open link in browser;
click to button image <- clear rectangle will be displayed
click again. <- rectangle will be disappeared
click again. <- rectangle with image will be displayed
Why image doesnot display first time?
At least you have one (very common) error in your code. The method .onload expects to be assigned with a function reference. You are assigning it to the result (the return value) of the immediate function call processButtonImages(i, delta, buttons[i], object). So as long as you are not returning a function reference from this function call (which you don't) this will not work as expected.
You are calling and setting somethings in image onload event. So, at first it doesn't execute the whole thing correctly. Check this jsfiddle. I edited the code at the end, http://jsfiddle.net/sKymY/14/
I have used the '#media only screen' in my CSS to determine how and what information should be shown depending on the users screen size. I have a class called panelContainer which is set to display when the screen is greater than 767px, and a class called mobileContainer which displays when the screen is less than that.
I have a couple of custom controls, one that contains the standard form layout and another that contains the mobile device form layout. Originally I placed a div around each with the appropriate styleClass. The problem with it this way was that although only one form is visible, they were both loaded so this caused save issues.
<xp:div id="panelContainer" styleClass="panelContainer">
<xc:content_sCompany></xc:content_sCompany>
</xp:div>
<xp:div id="mobileContainer" styleClass="mobileContainer">
<xc:content_iCompany></xc:content_iCompany>
</xp:div>
I have since added a div to my Xpage with the styleClass of panelContainer, I then added onLoad and onResize events which return the style.display of the div, these should then write the result to a viewScope. But I found it would only write onLoad and although the function was being called onResize it wouldn't change the viewScope variable.
<xp:scriptBlock id="scriptBlock1" type="text/javascript">
<xp:this.value>
<![CDATA[var init = function() {
obj=document.getElementById('formType');
if(getStyleDisplay(obj)=="none"){
formType='#{javascript:viewScope.put("formFormat","mobile");}';
}else{
formType='#{javascript:viewScope.put("formFormat","standard")}';
}
}
dojo.addOnLoad(init);
dojo.connect(window,"onresize",init);
function getStyleDisplay(obj) {
if(obj.currentStyle) { // IE – Opera
return obj.currentStyle.display;
} else { // firefox
return getComputedStyle(obj,'').getPropertyValue('display');
}
}]]>
</xp:this.value>
</xp:scriptBlock>
<div id="formType" class="panelContainer"></div>
.....this viewScope variable is then used in the following way:
<xc:content_Company xp:key="ContentControl">
<xp:this.facets>
<xc:content_sCompany id="content_sCompany"
xp:key="standard">
</xc:content_sCompany>
<xc:content_iCompany id="content_iCompany"
xp:key="mobile">
</xc:content_iCompany>
</xp:this.facets>
</xc:content_Company>
.....extract from content_Company......
<xp:callback facetName="#{viewScope.formFormat}" id="cbkCompanyFormContent">
</xp:callback>
I feel this is the better way to achieve the result I need, as when I have tried it manually it does only load one of the forms and they work as expected.
I cannot see why the viewScope is not being set properly, it is always being set to 'standard', even if I shrink my page before loading the page. I did try writing the value to a Hidden Input, which worked but whenever I tried to access the value using getComponent("hiddenInput1").getValue() it would return null, even though I could see that value had been set when viewing in firebug.
Ok can you check (or tell me if you already have) through some console.log("") 's that the onResize is being called and the correct display is being pulled down etc.
next it may be firing the onResize but are you then partail refreshing the area which is using the viewScope?
Code example of this: (replace controlID with yours)
XSP.partialRefreshGet("controlID", {
onError: function() { console.log('Error'); }
});
I'm a little confused about what the purpose of using onResize is for ? if is to decide what to show whether on mobile or normal screen there are much more efficient ways of doing this.
Using the new redirect control in the latest release of the ExtLib on openNTF. It does exactly what the name suggests and redirects based on certain expressions. leaving you to drop it on a page and say if mobile (or whatever) redirect to this page.
Having a dummy default load page that checks the useragent string to see which page to load (having a separate mobile / fullscreen pages). This is what the teamroom template application that comes with the ExtLib does with its main.xsp and then this is set as the default launch option.
Or if you are trying to do something with whether the phone / tablet is on landscape or portrait you should be using the onOrientationChange event not onResize. check out this example (not the code in the question is what I'm pointing you too, he has a problem getting that to work in a webview):
how to handle javascript onorientationchange event inside uiwebview
I want apply load-mask in view page. while launching the application, some view pages are taking time to load data later it will display, so if its taking time to load in that time i want show load-mask to users with some messages like "loading....". from some sample i have applied load-mask, but it is shows that message every time whenever i hit that page. this is bad way because here setting time. i need apply load-mask like this if don't have data it should show the load-mask to the user, until page getting the data. please any one help me. how to achieve this one
My code is here: at controller level i am taking the id of load-mask and setting the property as shown below code
onCompanyPageLoad: function () {
var loader = Ext.getCmp('mask');
loader.setMessage("Loading...");
loader.setIndicator(true);
loader.setTransparent(false);
loader.show();
setTimeout(function () {
loader.hide();
}, 1000);
}
The answer of user978790 is formal way to show and hide a loading mask in Sencha Touch 2.
If you can't make it work, it's very likely that you're doing something like:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
... then do something here
Ext.Viewport.setMasked(false);
Note that Javascript is asynchronous, so it does NOT make sure that the code lines are run in above order. Then there is a possibily that Sencha Touch initializes your loading mask and destroys it right then. In order to use loading mask correctly:
Initialize a loading mask as above.
Put the Ext.Viewport.setMasked(false); in special functions which are ensured to be launched after loading mask initialization, eg. event handler, or success function of your JSONP/AJAX request.
I do it the following way:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
Then you can use
Ext.Viewport.setMasked(false);
To stop showing a loading mask
This also works on components if you only want to show a mask on part of a view
Just remove all this.I have nice idea how to use loader.First on main page html just add loader
<div id="loader"></div>//add id#loader with background loading image
after your page loads just add on contoller Ext.get('loader').destroy();//when you page full load then it will load your loading div
This is a ColdFusion 8 question.
I have a cfm page that has a button that onClick calls the following Javascript function located in the page header:
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
document.body.style.cursor = "wait";
window.location="_expiration_letters.cfm";
}
}
On the page that is called, a series of emails are generated, then a PDF report file is generated and displayed using these two lines:
<cfheader name="Content-disposition" value="attachment;filename=#fileName#">
<cfcontent type="application/pdf" file="#docPath#/#fileName#" deletefile="true">
Notice in the JS function that the cursor is changed to "wait". But the program control appears to get lost after the above cfheader call and so I can't find anywhere that I can reset the cursor back to:
document.body.style.cursor = "default";
Do you have ideas on where I can place this to turn off the cursor animation? I tried multiple places and it doesn't work. Once the cfheader and cfcontent calls happen, control of previous window and cursor are lost it appears.
You might try something like this above the cfheader.
<script>
document.body.style.cursor = "default";
</script>
<cfflush/>
The problem is that doing so might (probably will) screw up the cfheaders since cfflush is designed to flush partial results and will include the headers. But it's the only thing I can think of.
If I understand you correctly, you want to have a "wait" cursor whilst the PDF is prepped, and then return to a standard cursor after that.
Don't web browsers do this automatically when you're waiting for a requested document? IE: as soon as you do your window.location, whilst the document is loading, the cursors automatically changes to a "wait", and then once the doc is served, returns to an "auto".
This is what I see (when running code similar to yours). Is this not what you see?
Instead of changing the cursor, display a loading message using HTML/animated gif. When the PDF loads, it will replace the loading screen.
I would suggest having a hidden div containing your loading message, then use JavaScript to make it appear when needed.
Here's some JavaScript. This is how it would be done with jQuery.
function confirm_expiration_letters() {
var resultOfConfirm = confirm("Would you like to send expiration and reminder letters?");
if (resultOfConfirm == true) {
$('#Loading').fadeIn(); //SHOW THE LOADING INDICATOR
$.post('PDFGenerator.cfm', function(returnData){ // AJAX POST, CALLBACK
//RETURN THE FILENAME OR LOCATION OF THE PDF
var FileName = $.trim(returnData); // TRIM THE RETURNED DATA
window.open("path_to_file/" + FileName,"_blank"); // NEW WINDOW
$('#Loading').fadeOut(); // HIDE THE LOADING INDICATOR
});
}
}