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
Related
I have a form to upload images. By default the source is "images/noimage.png";
<img id="previewing" src="images/noimage.png" />
I store the path in the database. If I select a specific user and the form gets loaded I want to display the image for the specific user. I do this in the windows.onload event. However another image (previous image the user had, if user had one) gets loaded instead of the new one.
var Logo = 'Logos/123.png'; //path stored in Database
if (Logo!='') {
//If the user has a 'Logo', show it
$("#previewing").prop("src", Logo);
} else {
// if user has no 'Logo', show default image
$("#previewing").prop("src", 'Images/noimage.png');
}
This does not work as expected. What's wrong here?
If after reloading image getting change then most probably its Caching issue.
you may try adding some random string into image URL like
Logos/123.png?v=xyz
Peace and Blessing be Upon us all.
Basically I have a div say:
<div class="divele" style="background: url("/image/bkimg.jpg") top center no-repeat;background-size:cover;"></div>
Then I have an upload button which the user can select an image from his/her computer and save it in the database. After the XHR response with file being saved. The server respond with the new image link the same as /image/bkimg.jpg which this time the old image has replaced with the new uploaded one. Now I need the div to re-request the new image from the server. and this is what i'm doing:
var parts = result;
$('.divele').css({"background": "url("+parts+") top center no-repeat", "background-size": "cover"});
Don't really know why But this does not load the new image.
Much regards
Thanks to this Answer: How to reload/refresh an element(image) in jQuery
Which Explains because both names are the same the browser uses the cached version, which in order to fix it you can simply add an extra unnecessary parameter which will look like:
d = new Date();
$('.divele').css({"background-image": "url("+result+"?"+d.getTime()+")"});
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.
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
});
}
}
In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.
For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar
FROM >facebook.com/foo?bar=foobar&xxxx=
TO > >>facebook.com/foo?bar=boobar&xxxx=
and this is not hashed change also
like
FROM >facebook.com/xxxxx#xxx=xxxx
TO > >>facebook.com/xxxxx#xxx=yyyy
How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.
If using an iFrame, how to implement this ?
I use somehting similar to this
try {
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page", href);
loadPage(href);
}
catch(e) {
window.location.hash = "#!/"+href;
}
If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.
wow. I just asked it few minutes ago ... use search next time ;)
Dynamic favicon when I'm proccessing ajax data
Modify the URL without reloading the page
There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.
They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.