We Keep Coding

div is filled dynamically with html after main page loads- how to determine it has been loaded

I inherited a project where a page is loaded, then code attached to that page fills in a div with dynamically generated html - it basically fills an existing div with a html string.
This string contains links to images, etc.
I want to tell when all the images, etc have loaded- I cannot seem to get any jQuery standard checks
to work - ie I have tried attaching $(window).load() after the dynamic stuff has been inserted.
I am wondering if I should write $(window).load() dynamically as well, or if there is any other
method- ie $("#thediv").load (doesn't seem to work. I cannot query all the new html for image tags, etc-
too much stuff is being put in.

The $(window).load() doesn't work for dynamic content as far as I know. You can use the .load event for each image separated. Here's an example:
var container = $("<div> ... Stuff ... </div>");
var images = container.find('img');
var imageIdx = 0;
images.load(function(){
imageIdx++;
if (imageIdx == images.length){
callback();
}
});
Where callback() is the function that runs after all images where loaded.

From my comment: window load applies to the initial page load only. Not dynamic loading of content within it. Attach load handlers to each loaded image element and count them.
This is the shortest version I could come up with for you:
// After HTML load finishes
var img = 0;
var imgCount = $("#thediv img").load(function(){
if (++img == imgCount){
// We are done loading all images!
}
}).length;

$(window).ready() only applies to the content within the HTML file and you can only use load to attach an onload event handler to a specific image (not a container), something like this might work for you.
window.ImageLoadHandled = false;
window.ImageLoadCount = 0;
function ImageLoadHandler() {
// guard against calling this function twice
if(window.ImageLoadHandled) return;
window.ImageLoadHandled = true;
// All images have loaded || timeout expired...
}
$("#myAjaxedDiv img").load( function() {
window.ImageLoadCount++;
if( window.ImageLoadCount == $("#myAjaxedDiv img").length ) {
// all images in #myAjaxedDiv have loaded
ImageLoadHandler();
}
});
// if images haven't loaded after 5 seconds, call the code
setTimeout( ImageLoadHandler, 5000 )
The only problem with this is that if an image fails to load for whatever reason, the code will never be hit, which is quite risky. To counteract this I'd recommend creating a setTimeout() method to call your code after a few seconds timeout in-case there is a problem loading images (client or server side) and I've also taken #TrueBlueAussie's correction into account in the edit.
Your alternative is to preload the images with your HTML page

How do I abort image <img> load requests without using window.stop()

I have a very long page that dynamically loads images as users scroll through.
However, if a user quickly scrolls away from a certain part of the page, I don't want the images to continue loading in that now out-of-view part of the page.
There are lots of other requests happening on the page simultaneously apart from image loading, so a blunt window.stop() firing on the scroll event is not acceptable.
I have tried removing & clearing the img src attributes for images that are no longer in view, however, since the request was already started, the image continues to load.
Remember that the image src was filled in as the user briefly scrolled past that part of the page. Once past though, I couldn't get that image from stop loading without using window.stop(). Clearing src didn't work. (Chrome & FF)
Similar posts I found that get close, but don't seem to solve this problem:
Stop loading of images with javascript (lazyload)?
Javascript: Cancel/Stop Image Requests
How to cancel an image from loading

What you are trying to do is the wrong approach, as mentioned by nrabinowitz. You can't just "cancel" the loading process of an image (setting the src attribute to an empty string is not a good idea). In fact, even if you could, doing so would only make things worst, as your server would continually send data that would get cancelled, increasing it's load factor and slow it down. Also, consider this:
if your user scroll frenetically up and down the page, he/she will expect some loading delays.
having a timeout delay (ex: 200 ms) before starting to load a portion of the page is pretty acceptable, and how many times will one stop and jump after 200 ms interval on your page? Even it it happens, it comes back to point 1
how big are your images? Even a slow server can serve about a few tens of 3Kb thunbnails per second. If your site has bigger images, consider using low and hi resolution images with some components like lightBox
Often, computer problems are simply design problems.
** EDIT **
Here's an idea :
your page should display DIV containers with the width and height of the expected image size (use CSS to style). Inside of each DIV, add an link. For example :
<div class="img-wrapper thumbnail">
Loading...
</div>
Add this Javascript (untested, the idea is self describing)
$(function() {
var imgStack;
var loadTimeout;
$(window).scroll(function() {
imgStack = null;
if (loadTimeout) clearTimeout(loadTimeout);
loadTimeout = setTimeout(function() {
// get all links visible in the view port
// should be an array or jQuery object
imgStack = ...
loadNextImage();
}, 200); // 200 ms delay
});
function loadNextImage() {
if (imgStack && imgStack.length) {
var nextLink = $(imgStack.pop()); // get next image element
$('<img />').attr('src', nextLink.attr('href'))
.appendTo(nextLink.parent())
.load(function() {
loadNextImage();
});
// remove link from container (so we don't precess it twice)
nextLink.remove();
}
};
});

Well, my idea:
1) initiate an AJAX request for the image, if it succeeds, the image goes to the browser cache, and once you set the 'src' attribute, the image is shown from the cache
2) you can abort the XHR
I wrote a tiny server with express emulating the huge image download (it actually just waits 20 seconds, then returns an image). Then I have this in my HTML:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 469px;
height: 428px;
background-color: #CCC;
border: 1px solid #999;
}
</style>
</head>
<body>
<img data-src="./img" src="" />
<br />
<a id="cancel" href="javascript:void(0)">CANCEL</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var xhr, img = $('img'), src = img.data('src');
xhr = $.ajax(src, {
success: function (data) { img.attr('src', src) }
});
$('#cancel').click(function (){
xhr.abort();
})
});
</script>
</body>
</html>

You can load your images using ajax calls, and in case that the uses scrolls-out, you can abort the calls.
In jQuery pseudo-code it would be something like that (forgive me mistakes in syntax, it is just an example):
1) tag images that you want to load
$(".image").each( function(){
if ( is_in_visible_area(this) ) { // check [1] for example
$(this).addClass("load_me");
} else {
$(this).addClass("dont_load");
}
});
2) load images
ajax_requests = {};
$(".image.load_me").each( function(){
// load image
var a = $.ajax({
url: 'give_me_photos.php',
data: {img: photo_id},
success: function(html){
photo_by_id(photo_id), img.append(html);
}
});
ajax_requests[photo_id] = a;
});
3) cancel loading those out of the screen
for( id in ajax_requests ) {
if ( ! is_in_visible_area(id) ) {
ajax_requests[id].abort();
}
}
Of course, add also some checking if the image is already loaded (e.g. class "loaded")
[1]. Check if element is visible after scrolling
[2]. Abort Ajax requests using jQuery

BTW, another idea that might work:
1) create a new iframe
2) inside of the iframe have the script that starts loading the image, and once it's loaded, call the .parent's method
3) when in need, stop the iframe content loading using .stop on the iframe object

Use a stack to manage ajax requests (means you will have serial loading instead of parallel but it is worth it)
On scroll stop, wait for 300ms and then push all images inside view-area into stack
Every time a user scrolls check if a stack is running. (fyi - you can stop all requests to a particular url instead of killing all ajax calls. also you can use regex so it should not stop any other requests on the page)
If an existing stack is running - pop all the images that are in it except for the top most one.
On all ajax calls - bind beforeSend() event to remove that particular image from the stack
It is late right now, but we have done something very similar at work - if you need the detailed code let me know.
Cheers!

Maybe you could serve the image through a php script which would check a field in the the db (or better yet a memcached) that would indicate stop loading. the script would portion up the image into chunks and pause in between each chunk and check if the stop flag for the particular request is. If it is set you send the header with A 204 no content which as soon as the browser gets it will stop receiving.
This may be a bit over kill though.

The solution could be a webworker. a webworker can be terminated and with him the connection.
But there is a small problem that the webworker uses the limited connections of the browser so the application will be blocked.
Right now I'm working on a solution with serviceWorkers - they don't have a connection limit (I hope so)

webcam image refresh with ajax

I have an image that is being constantly updated from a local webcam source, it is then displayed on a website. I can get the image to show and by refreshing the page the image will update (obviously).
What I am wondering is, how can I update this image every (lets say) 5 seconds, without having to refresh the page manually (ie. utilizing ajax).
Basic things I am not too sure about:
<img src=""/> <--- how can I load an image url that is located within the javascript code
within the javascript code, how can I create a function that will automatically update the image source, without having to reload the page
As I understand it, upon reading around, one of the main problems is that browsers will load the cached image unless the resulting httprequest looks different each time, as such am I required to add an additional item within the url string (ie. www.yoursire.com?image=foo&date=bar (the date is grabbed by date function or some other iterated value)) in order to circumvent this horrible browser predisposition?
Thanks in advance!

Without writing all the code
look at the javascript functions setTimeout() and setInterval()
it's easy to change the src attribute of ana element
document.getElementbyId("imageId").setAttribute("src", imageUrl);
if your image request url is the same everytime (but the pic has changed server-side) you can either add a "no-cache" to the ajax request header, or possibly add a random query string to the image to force a reload each time (e.g http://mydomain/myimage?3754854 )

With jQuery:
$(document).ready(function() {
window.setInterval("refreshCamera();", 1000); // one second interval
});
var url = 'http://www.x.com/abc?refresh=';
var forcerefresh = 0;
function refreshCamera()
{
forcerefresh = forcerefresh + 1;
$('#myImageId').attr('src',url + forcerefresh);
}
(the force refresh thing is to prevent browser from using locally cached image)

I have done this and it works using setting the image source. Also on the server-side, you have to send no-cache HTTP headers to prevent caching.
<img src="" id="webcam" />
<script type="text/javascript">
var int=self.setInterval("reload()",1000);
function reload(){
$("#webcam").attr("src", "/mysite/webcamImage");
}
</script>

You could use jquery to load an image object and then attach a timer and run the code for every 5 seconds.
Here's an example:
// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/headshot.jpg');
});
Read more about this here:
http://jqueryfordesigners.com/image-loading/
About preventing the caching of dynamically loaded images you can just add the last modified timestamp in the url:
<img src="image.jpg?lastmodified=1291235678" ...

I had the same need, so I'm appending my own js solution below. Occasionally our webcam will be in the middle of writing the jpg to a directory when the ajax refresh occurs, so instead of displaying a broken image, I'm presenting an animated gif.
JS:
<script>
$(document).ready(function () {
(function () {
// show webcam jpg on initial page load
var refreshWebcam = function () {
// webcam link is appended with a timestamp to prevent caching
var webcamImg = 'http://abs_path_to_webcam_img/webcam1.jpg' + '?' + (new Date()).getTime();
var loadingImg = 'http://abs_path_to_webcam_loading_img.gif'
$.ajax({
url: webcamImg,
type: 'HEAD',
error: function () {
$('#refresh').attr('src', loadingImg);
//console.log('failed loading ' + webcamImg);
// if there's an error, retry loading image every half second
setTimeout(function () {
refreshWebcam();
}, 500)
},
success: function () {
$('#refresh').attr('src', webcamImg);
//console.log('successfully loaded ' + webcamImg);
}
});
};
// refresh webcam jpg every 5 seconds
window.setInterval(refreshWebcam, 5000);
refreshWebcam();
})();
});
HTML
<img alt="Web Camera Image" id="refresh" src="http://abs_path_to_webcam_loading_img.gif" />

Disabling caching will overwhelm your webcam (even good ones) if it gets popular
I tried allowing the image to be allowed to be cached for 6 seconds (Cache-Control: max-age=6), because I needed to prevent a webcam from being overwhelmed. The code that I was working with looked a bit like this, but it has a problem:
<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg" /><br />
<script type="text/javascript">
(function() {
setInterval(function() {
var myImageElement = document.getElementById('liveimage');
myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg';
}, 6000);
}());
</script>
Previously, the web-developer had put a ?rand=(random-number) in as a cache-busting technique. That's bad when the image is cacheble (even if only for a short period of time), because if means that you may (depending on whether your cache will consider query parameters as non-cachable), mean you get a very poor cache hit rate and you get a lot of page representations being built up.
The problem was that the image was now not refreshing, because although the src attribute was being reassigned, it wasn't actually changing to a different value, so the browser (Chrome 51) wasn't updating the image. I changed the logic to have either an ?1 or a ?2 query string argument, and alternate between them.
<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg?1" /><br />
<script type="text/javascript">
(function() {
setInterval(function() {
var myImageElement = document.getElementById('liveimage');
if (myImageElement.src == 'http://example.com/webcams/suddenlypopular.jpg?1') {
myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?2';
} else {
myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?1';
}
myLogElement.innerHTML = myImageElement.src;
}, 6000);
}());
</script>
EDIT: While this works in Chrome and IE, it didn't work in Firefox, so I came up with an alternative solution that is working in Chrome, Firefox and IE (Safari is currently untested).
<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg" />
<script type="text/javascript">
(function() {
setInterval(function() {
var myImageElement = document.getElementById('liveimage');
var d = new Date();
// 6000 is 6 seconds; the desired refresh rate
// % n is a bit of an experiment for being nice on cache invalidation; it also puts a bound on how out-of-date something would be regarding clock skew.
var timeSlice = Math.floor(d.getTime() / 6000) % 3;
myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?t=' + timeSlice;
}, 6000);
}());
</script>
So now I have a cache-friendly webcam that does update.
Apache reverse-proxy configuration
Here's a snippet from Apache httpd for how you might reverse-proxy a webcam to set a particular caching policy.
<Location /webcams/suddenlypopular.jpg>
ProxyPass http://mywebcamdevice.example.com/snapshot.jpg
ProxyPassReverse http://mywebcamdevice.example.com/snapshot.jpg
ExpiresByType image/jpeg "access plus 6 seconds"
Header unset ETag
Header unset Last-Modified
</Location>

Javascript page load delay of specific set of pages

I want to delay a specific set of webpages using a small greasemonkey script. Basically, if the website being loaded is part of a set of pages, then I want to delay the time the page takes to load. e.g. if the page being loaded is "http://www.a.com/","http://www.a.com/b", etc. then I want to delay the load by 30 secs.

Assuming that Dushara's comment is correct:
"See xkcd.com/862 for what the poster wants. (Hover the mouse over the image to see the reasoning). In fact, I found this question while googling for exactly the same thing."
Then this is not possible in Greasemonkey. The reason is that GM fires after the page has loaded (except for any slow pictures or AJAX calls). So the user would see the page and then it would, say, flash blank for 30 seconds... But, only after quick eyeballs would have seen too much. ;)
Update: This is now possible in Greasemonkey (with the #run-at document-start directive -- Added August 2011). See this answer for an example.
Note that XKCD's creator uses good, old-fashioned willpower to implement his "simple 30-second delay". From his blog entry:
"Lots of people have asked me for the system I used to implement the restriction in the alt-text of today’s comic.
...
I made it a rule that as soon as I finished any task, or got bored with it, I had to power off my computer."
See also: "Browser extension (or other software) to delay page load" -- which now has links to proper extensions that people created for this.

If your reasoning is that you need some time for some elements to load before greasemonkey sees it as loaded, you could always set up an eventlistener that fires off your function when you click instead of on load then when you are ready to have the function fire off you merely have to click on the page somewhere. addEventListener("click", function, false)
If you are merely looking for a way to make it so that pages load automatically after a set amount of time you would have much better luck using imacros.

There exist Greasemonkey scripts that use overlays to do this:
Script #1 (works on one website)
I had tried to modify this and came up with something very rough that works with a list of multiple websites: Script #2. I no longer use the add-on because the script had weird side-effects on certain websites and could affect performance. I'm sure somebody else could do a much better job, but it's out there if you want to try it yourself or try to modify it.
For anybody not familiar with Greasemonkey, it is a Firefox add-on that allows you to modify websites with little snippets of javascript that you can write yourself or install from a library. To use either of these scripts, you of course need to install the Greasemonkey add-on (https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) (not linked due to a lack of rep - anybody with edit privileges please feel free to link).

As mentioned, GreaseMonkey scripts are executed on DOMContentLoaded, so after the page loads.
But well, in fact you can create a overlay <div> for certain number of seconds and it will have the same effect.
Here is a bit improved version of userscripts linked by #Jonathan (in fact, I wrote it by myself independently ;)
(function()
{
var timeout = 30;
var timeElapsed = timeout;
function hide()
{
document.documentElement.style.overflow = "hidden";
var newdiv = document.createElement('div');
newdiv.id = "leechblocker";
newdiv.style.width = "100%";
newdiv.style.minHeight = "100%";
newdiv.style.position = "fixed";
newdiv.style.top = "0px";
newdiv.style.left = "0px";
newdiv.style.zIndex = 10000;
newdiv.style.backgroundColor = "white";
newdiv.style.display = "block";
newdiv.style.overflow = "hidden";
newdiv.style.textAlign = "center";
newdiv.style.paddingTop = (window.innerHeight/2-10)+"px";
newdiv.innerHTML = "Wait <span id='counter'>"+timeElapsed+"</span> seconds...";
document.body.appendChild(newdiv);
}
function updateCounter()
{
var counter = document.getElementById("counter");
timeElapsed--;
counter.innerHTML = timeElapsed;
}
function unhide()
{
document.documentElement.style.overflow = "auto";
var leechDiv = document.getElementById("leechblocker");
leechDiv.parentNode.removeChild(leechDiv);
}
hide();
window.setInterval(updateCounter,1000);
window.setTimeout(unhide,timeout*1000);
}());

How to show a spinner while loading an image via JavaScript

I'm currently working on a web application which has a page which displays a single chart (a .png image). On another part of this page there are a set of links which, when clicked, the entire page reloads and looks exactly the same as before except for the chart in the middle of the page.
What I want to do is when a link is clicked on a page just the chart on the page is changed. This will speed things up tremendously as the page is roughly 100kb large, and don't really want to reload the entire page just to display this.
I've been doing this via JavaScript, which works so far, using the following code
document.getElementById('chart').src = '/charts/10.png';
The problem is that when the user clicks on the link, it may take a couple of seconds before the chart changes. This makes the user think that their click hasn't done anything, or that the system is slow to respond.
What I want to happen is display a spinner / throbber / status indicator, in place of where the image is while it is loading, so when the user clicks the link they know at least the system has taken their input and is doing something about it.
I've tried a few suggestions, even using a psudo time out to show a spinner, and then flick back to the image.
A good suggestion I've had is to use the following
<img src="/charts/10.png" lowsrc="/spinner.gif"/>
Which would be ideal, except the spinner is significantly smaller than the chart which is being displayed.
Any other ideas?

I've used something like this to preload an image and then automatically call back to my javascript when the image is finished loading. You want to check complete before you setup the callback because the image may already be cached and it may not call your callback.
function PreloadImage(imgSrc, callback){
var objImagePreloader = new Image();
objImagePreloader.src = imgSrc;
if(objImagePreloader.complete){
callback();
objImagePreloader.onload=function(){};
}
else{
objImagePreloader.onload = function() {
callback();
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
}
}
}

You could show a static image that gives the optical illusion of a spinny-wheel, like these.

Using the load() method of jQuery, it is easily possible to do something as soon as an image is loaded:
$('img.example').load(function() {
$('#spinner').fadeOut();
});
See: http://api.jquery.com/load-event/

Use the power of the setTimeout() function (More info) - this allows you set a timer to trigger a function call in the future, and calling it won't block execution of the current / other functions (async.).
Position a div containing the spinner above the chart image, with it's css display attribute set to none:
<div> <img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>
The nbsp stop the div collapsing when the spinner is hidden. Without it, when you toggle display of the spinner, your layout will "twitch"
function chartOnClick() {
//How long to show the spinner for in ms (eg 3 seconds)
var spinnerShowTime = 3000
//Show the spinner
document.getElementById('spinnerImg').style.display = "";
//Change the chart src
document.getElementById('chart').src = '/charts/10.png';
//Set the timeout on the spinner
setTimeout("hideSpinner()", spinnerShowTime);
}
function hideSpinner() {
document.getElementById('spinnerImg').style.display = "none";
}

Use CSS to set the loading animation as a centered background-image for the image's container.
Then when loading the new large image, first set the src to a preloaded transparent 1 pixel gif.
e.g.
document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';
While the large_image.jpg is loading, the background will show through the 1pix transparent gif.

Building on Ed's answer, I would prefer to see something like:
function PreLoadImage( srcURL, callback, errorCallback ) {
var thePic = new Image();
thePic.onload = function() {
callback();
thePic.onload = function(){};
}
thePic.onerror = function() {
errorCallback();
}
thePic.src = srcURL;
}
Your callback can display the image in its proper place and dispose/hide of a spinner, and the errorCallback prevents your page from "beachballing". All event driven, no timers or polling, plus you don't have to add the additional if statements to check if the image completed loading while you where setting up your events - since they're set up beforehand they'll trigger regardless of how quickly the images loads.

Some time ago I have written a jQuery plugin which handles displaying a spinner automatically http://denysonique.github.com/imgPreload/
Looking in to its source code should help you with detecting when to display the spinner and with displaying it in the centre of the loaded image.

I like #duddle's jquery method but find that load() isn't always called (such as when the image is retrieved from cache in IE). I use this version instead:
$('img.example').one('load', function() {
$('#spinner').remove();
}).each(function() {
if(this.complete) {
$(this).trigger('load');
}
});
This calls load at most one time and immediately if it's already completed loading.

put the spinner in a div the same size as the chart, you know the height and width so you can use relative positioning to center it correctly.

Aside from the lowsrc option, I've also used a background-image on the img's container.

Be aware that the callback function is also called if the image src doesn't exist (http 404 error). To avoid this you can check the width of the image, like:
if(this.width == 0) return false;

#iAn's solution looks good to me. The only thing I'd change is instead of using setTimeout, I'd try and hook into the images 'Load' event. This way, if the image takes longer than 3 seconds to download, you'll still get the spinner.
On the other hand, if it takes less time to download, you'll get the spinner for less than 3 seconds.

I would add some random digits to avoid the browser cache.