Develop Reference

How to load image if the image is available on AWS?

I upload image from vue, to server. The server will return the image url, but it's will process the image first, and then upload it to AWS. And the process may takes about 1 - 3 second untill the image fully uploaded to AWS
The problem is my vue already get the image url before the image fully upload, and try to load it in <img>, and an error happen, 404 not found. Because it's not fully uploaded to AWS.
Question:
How to automatically load an image as soon as the image available on AWS using best practice / clean way?
For now, I use looping, and use #error, and check every 1 second. But I think it's not clean

Firebase getDownloadURL() is really slow at getting image URLs

I have a page which displays multiple (12+) objects in components, each of which has an image. This image has a src attribute, which I'm setting via a call to my Firebase storage:
this.props.storage.child('Land.jpg').getDownloadURL().then(function(url) {
var img = document.getElementById('imageGoesHere'+this.state.currentId);
img.src = url;
}.bind(this))
The storage prop is generated and passed down by a parent component:
firebase.initializeApp(config);
var storage = firebase.storage();
var storageRef = storage.ref("");
The storageRef var is passed as a prop to each child component that calls the getDownloadURL() function.
This works, but the getDownloadURL function seems to be really slow. The page renders, and then each image takes at least a second to be shown/rendered. I know it's not the raw URL's issue, since I can get the raw URL and paste it into the src and it loads fine (i.e. nearly instantly); I look at the Network tab in chrome devtools and it shows at least a second between the getDownloadURL call and the response. Is this the proper way of getting images to be shown in web pages? The Firebase Storage docs don't mention any other way.
edit: Two things; firstly I only have 5 test images in the storage, so it's not like I'm syncing to a whole bunch with the root storage ref.
Second thing; chrome devtools shows me that it's "stalling" for 1-4 seconds, and the actual request only takes 100ms tops. What can cause stalling?

This can happen because you are downloading every single image you have every time this code runs. It can happen if you sync the instance to the entire image hierarchy.
You could also figure out the reason by looking at Chrome's Network tab, and see if you have tons of files downloading, like this:

you should use the firebase public url when the image is uploaded (if you doing that way). Something like this:
uploadTask.then(function(snapshot) { return snapshot.ref.getDownloadURL() })
And save it to the DB inmediatly. Just create an "images" table and create a column named "url" or "link". That url/link you will use every time you need that image.
Now if you are uploading manually , select the image (in firebase console) and in the "file location" section, go to "access token".

Find out when document.location.href has been completed

I have a button that lets users download a file.
The file is returned from the server in the Response (binaries set as attachment), and I am letting the browser handle the file download from there on out.
Im doing the following on button click:
var fileUrl = 'mysite.com?id=12345';
document.location.href = fileUrl;
This will load the file, however, it can take a couple of seconds. I would like to show a preloader but then ofcourse I have to know when the file has been downloaded completed. Since I'm staying on the same page, is there a method or callback that tells if the 'new' location is loaded and thus I can hide the preloader?
Thanks!

Assuming you can download the file twice, you could load the file in a hidden iframe and detect when the iframe is done loading. Then, the file is already cached and should download quickly.

Phonegap remove/delete taken image

I've been following the Phonegap Camera Docs, and am uploading the ImageURI to a server successfully. However, the image that was cached when the photo was taken is still on the phone. How do I clear the cache or remove the photo after I'm done uploading the photo?

You should be able to take the picture URI and pass it to window.resolveLocalFileSystemURI and then in the success callback of this method you will get a FileEntry object which you can call the remove method on.

How can I use my own image when site returns fake image with a 404 response code

This is a bit different then the usual question about how to gracefully handle broken images in javascript.
I already have an onerror handler on the image that will replace it with a custom "image not found" image.
However, there is a site that, when you request their image, returns a 404 response code, but in the response body actually returns an image with their own custom not found image. Apparently, the img onerror event doesn't trigger in this case because there is still an image despite the error code. (I tested on FireFox, IE8, and Chrome)
Here is a sample of the image in question: http://images.cars.com/preview/DMI/186445/C2121.jpg
Does anyone have any ideas for how to detect this case in javascript and replace their dynamic 404 image with our own? Thanks!

One simple solution that comes to mind is not to load an image immediately, and then use javascript in document.ready or window.onload to get the image. Then, if the status is 404, put your own noImageAvailable.png in the image. If you get a 200 or other OK status, put the received image in there. There is a problem with this, however.
The same-origin policy does not allow scripts to access content cross-domain. So you would not be able to simply use javascript to get this file. There are a couple workarounds for this, one of which I will explain here (not necessarily the best, just an option).
The benefit of this method is that the javascript can just ask for a file, and display the result. The downside is more backend code. Simply have the javascript request the image from your server (AJAX), and insert the result in the img. On the server side for this request, open a TCP socket to the server hosting the image (you will have to resolve the IP address), and send an HTTP GET request for the image. If the image is returned ok, send it along as a response to the AJAX. If not, send your own noImageAvailable.png back.
Since this may take some time, you may want to replace the image with a default "loading" image at first, until the AJAX returns.
AJAX Tutorial
HTTP Protocol Information
I'd include something on socket programming for you, but I don't know what kind of backend you are using.