We Keep Coding

How to preload image offscreen and then move to different onscreen element?

I'm building a website/app that will display six different images at a time. The contents of those images are loaded from another site and changing regularly. Where any particular image goes on screen depends on the state of all images already on screen.
To get the image I use jQuery to change the src attribute of one of the 6 img locations, then wait for the load using jQuery load(), then show it. However, this means I have to pick my location before the image is loaded. The problem I'm having is that between the time I initiate the load and when the image finally does load, the proper location for that image might have changed.
So my question is whether there's a way to load the image offscreen (say in a hidden img), and then, when it's loaded, get a notification of it being finished and then move that image to the correct location at that moment.
I've found lots of preload questions and answers on StackOverflow, but they all presume you know where you want the image to go when you initiate the load.
Update: thinking more on this question, perhaps another way of framing it is 1) if I load an image from an offsite server into an offscreen/hidden img and wait for it to load, 2) would subsequently setting the src attribute of an onscreen/visible img to the same image URL draw from the server or the browser cache? In other words, if I load a remote image offscreen does the next request for that same image go back to the server or to the browser cache (and would this be consistent for all browsers)?

One Way to do it:
function loadImg(url, callback, key) {
var image = new Image();
image.onload = function() {
callback(image, key)
};
image.onerror = function() {};
image.src = url;
}
function imageOnload(image, key) {
imageGoesTo[key].src = image.src
}
var imageGoesTo = {
"firstPicture": document.getElementById("img1"),
"secondPicture": document.getElementById("img2"),
}
loadImg("http://7pi.azurewebsites.net/img/DSC09906.jpg", imageOnload, "firstPicture")
imageGoesTo["secondPicture"] = document.getElementById("img3")
loadImg("http://7pi.azurewebsites.net/img/DSC07934.jpg", imageOnload, "secondPicture")
<img id="img1" alt="loading">
<img id="img2" alt="loading">
<img id="img3" alt="loading">

javascript/jquery - recognize loaded from cache

I have image gallery and am updating front-end, is there a way to use javascript or jquery or any other front end technology to identify which image was loaded from cache? I would like to apply additional class for those items.
Thanks for any sugestions.

Short answer :
No
Long answer :
No, and there is a reason for that :
If you could know which element of tha page was from the cache, you could deduce that your user have been to the same page or another page with the same element/ressource. It would be a massive potential privacy breach.
A similar problem was arised with the changing color of link if they are visited (see http://dbaron.org/mozilla/visited-privacy for more info)

You can use the function below. However it will load the image if not cached.
function isCached(src) {
var image = new Image();
image.src = src;
return image.complete;
}

jquery image load function not being called properly

I am having the following issue in a mobile web application I am developing: In javascript, I have a Image() control and I have an event attached to the image control that should fire when the image gets loaded. Inside of the "pageshow" event for the page, I am setting the src attribute of the Image() to a valid image. If I return to the page, after having visited the page once, the load event for the image is not firing. I have seen several threads say that this can be caused by the image being cached but in my case I am pretty sure that is not the issue. Why doesn't the load event for the image fire and how can I make it work properly?
Code follows:
<script>
var srcImage = new Image();
$(srcImage).on("load", function() {
...
});
$(document).one("pageshow", '#pageid', function () {
srcImage.src = imagepath;
});
</script>

I found the issue, thanks to epascarello (see above comments). I assumed the image file was valid but discovered it was not. When a valid image file is used, the above code works fine.

How to detect progress loaded for GroundOverlay

I am loading 10 GroundOverlays onto a GoogleMap and would like to show the progress associated with loading the images.
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));
var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
How can I detect when the actual image of each overlay has loaded or the % loaded? I'd like to add a progress bar or something to show the user that overlays are loading as it can take 5 seconds or so.

If you have one single image as a groundoverlay, I'd do the following:
Create an img tag through javascript
Set its src to overlays/layer1.png
display a waiting box
Add an onload event to it, on which load it as a gmaps overlay and close the waiting box.
Progress... that's a bit more browser specific. But loading is easy, so:
function loadOverlay(){
var img = new Image();
var img_url = "overlays/layer1.png"
img.src= img_url;
$('#wait_for_overlay').show();
img.onLoad = function(){
$('#wait_for_overlay').hide();
var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
}
};
Reason why this will work:
Creating an img object and setting its 'src' attribute will make the browser start to download the requested file as soon as the javascript function doing this has finished.
The browser will put this image into its local cache, then call the onLoad function to see what should happen with it.
The callback actually does nothing to the img variable (perhaps it should, make sure it doesn't get wiped out as per closure rules, do a NOP with it if this is buggy), but instead calls the google-maps function.
The google-maps function will request the image at the exact same url, at which the browser will look up its cache table, and bring the image back immediately from cache.
This trick is nasty, but in fact, the google maps engine will do the exact same onLoad thingy in the background (as this is how map engines work).
I hope this satisfies your question... no progress bar, just a loading indicator... Perhaps you could do progress bar by requesting it with XHR and checking progress, I'm not sure, but the trick will be the same: do a faux request, in order to make it arrive to the cache.

I doubt you can do it. You may request for new functions added to the GroundOverlay class in order for the users to have more access and control over the loaded image. I'd like to have those kind of functions for my projects too.

As of 10 years later, 2021 Dec. I can confirm that #Aadaam 's idea works great !
Try my example:
click the example link, try zoom map or pan,
it load image as groundOverlay, the progressing bar show on left panel bottom.
new Image()
is HTML img object, document is here
img_object.onload
is all lowercase, if you write
.onLoad
will give you error.
https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg&center_lat=33.65789936781538&center_long=-116.25862990762825&center_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image

JavaScript background work (wait until all processing finished and display result )

i'm working in an application
i have to change some css files in the page and some images (reloading them from the server) using javascript , but it takes some time and it's obvious that page items are reloaded slowly -in slow connections- , so is it possible to do this processing in the background and then display the whole page when ready ??

AFAIU you can put it in a hidden IFRAME. In this IFRAME you handle onLoad event. However, this won't fasten up loading process, it will only hide it from user.
Examle:
Let's say that you have a long-lasting JavaScript method named longLoad() . You should put it in a separate HTML page named e.g. hidden.html.
<html>
<script type="text/javascript">
function longLoad() // javascript method here...
{
/// some code here...
}
</script>
<body onLoad="longLoad();">
</body>
</html>
Your main page (the one that is actually visible in browser) may look like this:
<html>
<body>
....
.... content
....
<iframe src ="hidden.html" width="100%" height="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
As you can see IFRAME height is set to 0 making it invisible on the page- that's why I called it hidden. However, when the user loads the page, the hidden IFRAME will be loaded too. And its onLoad event handler will also be called. And it is possible to access and modify content of the main page from that JavaScript event handler (through DOM trees).
PS. The above code was written from memory, however the presented solution works. It was used long before AJAX came into popularity.

You can hide the whole page while your work is going on, or you could load your CSS and images and only do the updates to the DOM when all your materials have made it to the client.
You can load an image by creating a new Image object:
var img = new Image();
img.onload = function() { /* do something */ };
img.src = "/new/image.png";
The "onload" function will run when the client has received the image file and it's ready to be displayed. Thus you could arrange to load up images that way, and use the "load" handlers to track when they're ready. When all of them are, then you can update the DOM and it should go very quickly.