Develop Reference

Placeholder while an image is loading with Ember.js [duplicate]

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.

Works on browser but not as app

I have a problem.
A strange problem.
I have this part of code:
Actions.loadWizzard = function(href)
{
alert(1);
var wizardTimer;
var wizardTimer2;
if (navigationObject.getLocation(href) === "ProductInformationWizzard") {
navigationObject.newPage("loading");
wizardTimer = setTimeout("navigationObject.newPage('contentProductInformationWizzard');", 3000);
wizardTimer2 = setTimeout("window.productInformationWizzardObject.init()", 1000);
} else if (navigationObject.getLocation(href) === "contentAdviceWizzard") {
navigationObject.newPage("loading");
wizardTimer2 = setTimeout("window.adviceWizzardObject.init()", 10000);
}
return;
};
And on the normal browser it works excactly as it should work.
As a WRT though (or phonegap app) it doesn't.
It doesn't give me the alert (used for debugging). It doesn't use the setTimeout. evaluates instantly or something. And the loading page is not shown.
yeah, sometimes it shows up once.
Another problem is that the loading div has a GIF img. It;s like a loading img.
But the thing is just static. It's like normal image instead of a animated GIF.
How is this possible.
Some notes to the code:
navigationObject.newPage(page);
This hides the current div i'm viewing and shows the div i pass to it.
window.adviceWizzardObject.init();
This makes an ajax request to a jsonrpc server and then evaluates the data json retreived and set's up the wizard.
Thanks in advance,
Erik

It does work,
But becouse of some caching or something the old versions were loaded or something like that.
Restarting my phone solved the problem.

JavaScript greybox -- slidehow won't work in FF/Safari

is anybody familiar with greyBox JavaScript plugin?
orangoo.com/labs/GreyBox/
it's for slideshows and stuff.. I can't get it to work in FF/Safari; it works great in IE, but FF/Safari won't play ball..
orensanz.org/photos.html
would very much appreciate some suggestions..
supposedly there's a google group (forum) for this thing (can't post url.. this thing limits how many urls u can include in a post, it's linked to from their home pg (url above.. oh brother..) but when you link to it you land on a pg that says they've been booted out b/c they violated google's terms of service....;-)
thank you..

It looks to me as if there's a race condition in some of that Javascript code. If the image isn't in cache, then this looks to me like it'll never make the image box visible:
if(gb_type == "image") {
if(img_holder.width != 0 && img_holder.height != 0) {
var width = img_holder.width;
var height = img_holder.height;
GB.width = width;
GB.height = height;
setupOuterGB();
if(GB.use_fx) {
AJS.setOpacity(frame, 0);
AJS.fx.fadeIn(frame);
}
}
}
else {
GB.width = frame.offsetWidth;
GB.height = frame.offsetHeight;
setupOuterGB();
}
In think that code should be called as the "load" handler for the image. Note that your page works fine in Firefox the second time you click on any particular image.

if(GB.show_loading) {
AJS.AEV(window, 'load', function(e) {
loaded();
});
}
else {
loaded();
}
Try putting these lines on either a timeout or replace the lower loaded() with AJS.AEV(window, 'load', function(e) {loaded();});

(I couldn't add comment, nothing happens when click on 'add comment'..)
yes I know I can use other lightboxes.. but what I do need is one in which slideshow lands in photo the user CLICKED.. at work I've been using this one, flowplayer.org/tools/demos/scrollable/easing.html, but when you tell it to start at a given photo (not photo 1) it SLIDES towards it.. I need one in which it just lands on specified photo without the sliding effect -- other than that this one would be perfect
a lot of slick JS lightboxes out there have 'next' button on top of photo itself and other stuff obstructing photo a bit, I don't want that.. ) oh man, I still can't get this thing to work AT ALL in Safari, whereas examples they have online (orangoo.com/labs/GreyBox/) work fine in Safari, I don't get this.. thank you for your help (btw: I tried many diff settings for setTimeout, all the way from 1000 milliseconds to about 30,000.. either way Safari won't touch it.. :-(

shift-reload in FF gives unexpected results

I'm presenting a simple animation using img.src replace and the <canvas> tag. At present it's only expected to work in FireFox (FF 3.5.3, Mac OS X 10.5.5), so cross-browser compatibility isn't (yet) an issue.
When the page is first loaded, or loaded into an new window or tab, all seems to work as expected, and the cache behavior on a simple reload does not seem to be an issue; however, if I try to force a reload with shift-reload, I get a problem. Even though the images have been pre-loaded, the preloaded images for the animation don't seem to be available to the browser which then tries to load each new img.src from the server.
Am I looking at a browser bug here, or is there something buggy in my code that I can't see? This is my first shot at implementing a js class, so there might be a lot here that I don't understand.
Any insight from the assembled wise here would be welcome. You can see what I'm talking about at:
http://neolography.com/staging/mrfm/spin-sim.html
Thanks,
Jon

When you shift reload you're telling the browser to reload - not from the cache.
So it shouldn't be a surprise that you're getting the images from the server.
Images can be preloaded in javascript with the following code:
img = new Image();
img.src = "your/image/path";
If you want the images loaded before you use them that might help.

I had a look at your code and you have the following in document.ready()
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
}
}
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
the animation = new simAnim line is executed regardless if all 100 images are loaded or not...
One possibility to fix this would be to move that line inside the countLoadedImages function like so:
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
}
}
this way that function will be executed once all the images have loaded

Thanks to ekhaled, who tried. I'm now satisfied that this is a browser bug:
Mozilla bug #504184
I have a stripped down example at http://neolography.com/staging/shift-reload/shift-reload-testcase.html which I will leave up. I encourage all to vote for this bug in the mozilla bug tracker so that it will get fixed.
j

Toggling link text when navigating between pages based on selected stylesheet

I have installed a script on my website that allows for a low contrast setting and a high contrast setting, as my site will be used by sight impaired persons. The script works perfectly. The only problem is when a visitor visits multiple pages of the site.
When you first visit the site, the low contrast setting is in effect by default and only the link to the high contrast setting appears. If you then visit other pages of the website, the low contrast setting is in effect by default and only the high contrast link appears (this is perfect and as it should be). The website does this by using a cookie.
Here is the problem. If you click on the high contrast link to view the page in the high contrast setting and then go to another page, the other page appears in the high contrast setting (as it should), but instead of a link to the low contrast setting appearing (which I would like to happen), a link to the high contrast setting appears (which does not make sense, given the page is already in the high contrast setting).
My site is not done, but I published a few pages at http://www.14kt.eu/ so you can see what I am talking about. A number of the members of this site were kind enough to help me with the code/script and things were working perfectly for a bit, but then it just stopped working. I suspect I changed something in the rest of the html that caused this. Rather perplexed over this issue.
If anybody can please tell me how to fix this problem, I would be most grateful.
Thank you for your time, Chris

It looks like you just need your stylesheet buttons to be conditionally hidden based on the cookie.
You can do this with the code below (updated):
function setStylesheetFromCookie() {
var stylesheet = readCookie('mysheet') || 'none';
if( stylesheet == 'highcontrast' ) {
console.log('high');
document.getElementById('Lc').style.display = 'block';
document.getElementById('Hc').style.display = 'none';
} else {
console.log('low');
document.getElementById('Hc').style.display = 'block';
document.getElementById('Lc').style.display = 'none';
}
}
Add that code somewhere in script_1.js.
In order for that to work, it needs to run on window load.
This brings us to problem two. You have two different window.onload assignments in script 1.
You need to consolidate the two. Delete the line
window.onload = FixRows;
And modify the second window.onload = function() to look like the following:
window.onload = function() {
var el = document.getElementById('mydiv');
var size = readCookie('fontsize');
if(size) {
doChangeSize(el, size);
}
var original = readCookie('originalsize');
if(original) {
el.originalSize = original;
}
FixRows(); //You are adding this line
setStylesheetFromCookie(); //and adding this line to the end of the function
}
Notice the two new function calls at the end.
This should solve your problem.
Cheers!

Just kind of poking around and it appears as though you've got javascript running in a couple different directions at the same time. window.onload is tied separately to two different functions. The first one calls FixRows which should work to display 'low contrast'/'high contrast' appropriately (from the cookie you set). I'm thinking the second window.onload is overriding the first.
I don't think this is directly affecting your code, but you have setCookie() in styleswitcher.js and createCookie() in script_1.js - they are doing the same thing. I'd say you should at least consolidate you cookie functions in one or the other library to cut down on confusion.
Hope I've been helpful.