We Keep Coding

How to trigger iframe load event more than once when changing iframe source

I have an iframe that links to another internal web application.
There's a side panel with a list of links that changes the src of the iframe. Sometimes if there's a lot of data, the iframe site takes a while to load. I want to put a spinner icon when a link is clicked and hide it when the frame is loaded.
I change the src using $('#myiframe').attr('src', urlVar) in a click function for the links. I can show the spinner on click.
The problem is, how do I hide it? How do I find out that the iframe has finished loading?
I tried using $('#myiframe').load(function() { }) but that only works on the initial load (i.e. for the first link I click), not for subsequent loads (if I click on another link).

This javascript works for me :
function loadNewUrl (url){
if(url === undefined) url = 'http://example.com?v=' + Math.random();
var ifr = document.getElementById('myiframe');
ifr.setAttribute('src',url);
ifr.onload = function() {
alert('loaded');
};
}

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">

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.

Print popup in JavaScript missing images

I want to open a new window/tab, put some HTML in the document, then bring up the browser print dialog to print that new window. I am using the following to accomplish this:
var w = window.open();
w.document.write(html);
w.document.close();
Where html contains:
...<body onload="window.print()">...</body>...
This all works, the window pops up, and the print dialog is shown for the new page, however, for some reason the browser isn't waiting for all the images on the page to load before showing the print dialog. It's causing some images not to print.
There are many images, and they are dynamically generated on the server side (takes about 1 sec each to load). How do I force the browser to only print once all the images are loaded?
This happens in Chrome and Firefox that I've confirmed. I appreciate any help.

Try putting your printer call in an onload event for the last image.
<img onload="window.print()" ... />
EDIT:
Full answer by OP as seen below:
I came up with the following script using #chockleyc's answer as inspiration. I couldn't just use the last image because they don't necessarily load in order. The following script will print the page after all images have loaded (uses jQuery):
var hasPrinted = false;
$(document).ready(function(){
$('img').load(function(){
var imgs = $('img');
var loadedAll=true;
for(var i=0;i<imgs.length;i++){
loadedAll &= $(imgs[i])[0].complete;
}
if (loadedAll && !hasPrinted) {
console.log('printing');
hasPrinted = true;
window.print();
}
else {
console.log('not all images have loaded');
}
})
});

Try changing it from the body.onload event to the window.onload event.
w.window.onload = window.print()
Or something like that.

javascript/jquery start loading hidden images when page is ready

I have a bunch of images on a website that have two versions: a large one and a small one.
The small version automatically display when you visit the website and when you click them, I use jquery to open up a hidden div and insert the large version.
Since the large images are not visible to the browser when the page loads (no img has them as a src), they will not be loaded until the user clicks one of the small images to enlarge it, and therefore they will not slow down page loading time.
To make the UI as responsive as possible however, I would like to start buffering the large images from the moment the page has loaded (so that they are there when the user clicks one of them).
how can I start loading images in the background?

You can start loading images in the background when you set a src to an Image object, f.ex:
(new Image).src = src;
Here is a function for you:
function preloadImages() {
for(var i=0; i<arguments.length; i++) {
(new Image).src = arguments[i];
}
}
preloadImages('one.jpg', 'two.jpg');
I suggest you start preloading the images when the window has loaded (inside the window.onload callback) to prevent it from sabotaging the UI:
window.onload = function() {
preloadImages('one.jpg', 'two.jpg');
};