We Keep Coding

Loader dissapears but image not rendered entirely

I have quite a few static photos on my page. My goal is to show a loader while the page and the image loads. The problem is after my loader disappears, the image is not fully rendered yet.
How can I make the loader disappear after the images fully rendered?
Here is my current attempt from a different source.
Javascript:
(function(){
function id(v){return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
img = document.images,
c = 0;
tot = img.length;
function imgLoaded(){
c += 1;
var perc = ((100/tot*c) << 0) +"%";
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot) return doneLoading();
}
function doneLoading(){
ovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
}, 1200);
}
for(var i=0; i<tot; i++) {
var tImg = new Image();
tImg.onload = imgLoaded;
tImg.onerror = imgLoaded;
tImg.src = img[i].src;
}
}document.addEventListener('DOMContentLoaded', loadbar, false);}());

You're missing the image in the body
...
function doneLoading(){
ovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
}, 1200);
//you should put
document.body.appendChild(this);
}
...

Preloading and showing images with javascript

To continue on the question here. Since I am doing this for the first time, and I still consider myself a newbie in javascript I would like to know how to properly preload images for the browser.
This is my script:
$(document).ready(function () {
var imagesIndex = 0;
var loadedImages = new Array();
var nextImage = 0;
preload();
function preload() {
for (i = 0; i < 2; i++) {
if (nextImage < images.length) {
var img = new Image();
img.src = '/imagecache/cover/' + images[nextImage];
loadedImages[nextImage] = img;
++nextImage;
}
}
}
$('#forward').click(function() {
imagesIndex++;
preload();
if (imagesIndex > (loadedImages.length - 1)) {
imagesIndex = 0;
}
$('#image').attr({"src" : '/imagecache/cover/' + loadedImages[imagesIndex], "alt" : name});
});
$('#back').click(function() {
imagesIndex--;
if (imagesIndex < 0) {
imagesIndex = (loadedImages.length - 1);
}
$('#image').attr({"src" : '/imagecache/cover/' + loadedImages[imagesIndex], "alt" : name});
});
});
I am getting images from the global array images, and then using preload function to preload 2 at the time. I wonder what do I need to send as a source to the image element. Is that a src from the loadedImages array element or from the images array?

Js function always return the same values

Js beginner here.
I have a function like this:
generateSteps: function() {
var stepsLength = this.data.steps.length;
var dataStepsInit = this.data.steps;
for (var i = 0; i < stepsLength; i++) {
var stepsItem = dataStepsInit[i].ITEM;
var arrayItem = this.animationNodes[stepsItem - 1];
var transition = this.animationParameters[i].transition;
var options = this.animationParameters[i].options;
var speed = this.animationParameters[i].speed;
var delay = this.animationParameters[i].delay;
arrayItem.delay(delay).show(transition, options, speed);
if (dataStepsInit[i].AUDIOID) {
var audioClass = dataStepsInit[i].AUDIOID;
var audioPlayer = this.template.find("audio." + audioClass);
setTimeout(playAudioOnDelay,delay);
};
var playAudioOnDelay = function() {
audioPlayer[0].pause();
audioPlayer[0].currentTime = 0;
audioPlayer[0].play();
};
}
}
What it does is generate data from JSON and display animated elements one by one on delay. Animation part work fine. I can assign required animations and delay to DOM elements and show them in right order.
But what I want to do in the same time is also to play an audio on delay (so I use setTimeout). Everything is almost fine, I play audio in right time (correct delay value) but I always play the same audio (which is last element) because audioPlayer always is the same DOM node.
I think this have something to do with this or I mixed a scope?

Try this:
generateSteps: function() {
var stepsLength = this.data.steps.length;
var dataStepsInit = this.data.steps;
for (var i = 0; i < stepsLength; i++) {
var stepsItem = dataStepsInit[i].ITEM;
var arrayItem = this.animationNodes[stepsItem - 1];
var transition = this.animationParameters[i].transition;
var options = this.animationParameters[i].options;
var speed = this.animationParameters[i].speed;
var delay = this.animationParameters[i].delay;
arrayItem.delay(delay).show(transition, options, speed);
if (dataStepsInit[i].AUDIOID) {
var audioClass = dataStepsInit[i].AUDIOID;
var audioPlayer = this.template.find("audio." + audioClass);
setTimeout(playAudioOnDelay(audioPlayer),delay);
};
}
function playAudioOnDelay(audioPlayer){
return function(){
audioPlayer[0].pause();
audioPlayer[0].currentTime = 0;
audioPlayer[0].play();
}
}
}
Essentially, your problem looks like this: http://jsfiddle.net/po0rLnwo/
The solution is : http://jsfiddle.net/gpfuo1s8/
Check the console in your browser.

How to preload images and then change div contents once the imaged are done loading

I am trying to preload a bunch of images, and then once they are FULLY loaded, change the contents of a div, here is my code so far, but it just throws my browser into an infinite loop. Any help would be great. Thanks!
var mydir ='slideshow_pics/';
var myArray = new Array();
myArray[0] = mydir+'0.jpg';
myArray[1] = mydir+'1.jpg';
myArray[2] = mydir+'2.jpg';
myArray[3] = mydir+'3.jpg';
myArray[4] = mydir+'4.jpg';
myArray[5] = mydir+'5.jpg';
myArray[6] = mydir+'6.jpg';
myArray[7] = mydir+'7.jpg';
var myWidth = new Array();
myWidth[0] = '470';
myWidth[1] = '450';
myWidth[2] = '450';
myWidth[3] = '500';
myWidth[4] = '550';
myWidth[5] = '450';
myWidth[6] = '800';
myWidth[7] = '300';
var myCheck = new Array();
function preloader(images){
var i = 0;
// start preloading
for(i=0; i<=images.length; i++){
imageObj = new Image();
imageObj.src=images[i];
imageObj.onLoad = check(i, images.length);
};
}
function checkimg(data, w) {
p=0;
z=0;
o = 'no';
var myImg = new Image();
myImg.src = data;
while (p == 0) {
if (myImg.naturalWidth == w) {
p = 1;
o = 'yes';
}
z++;
}
return o;
}
function check(e,i) {
if( e == i ){
if (document.getElementById('myss') != null) {
//now we need to make sure each image is fully loaded
for(i=0; i<=myArray.length; i++){
p=0;
z=0;
myCheck[i] = checkimg(myArray[i], myWidth[i]);
}//end foreach
if (myCheck.join('') == 'yesyesyesyesyesyesyesyes') {
document.getElementById('myss').innerHTML = '<embed src="RectangleSlideshow.swf" width="1028px" height="324px"></embed>';
}
}
};
}

I believe you need a sort of image pre-loading for a gallery.
I have that code implemented in my index web page:
http://www.becomingthebeast.com/index.html
See if it works for you.

Assigning event functions with a loop in JS

Here is the script I have:
And I'm trying to assign event to each element in an array.
window.onload = sliding;
function sliding() {
document.getElementById('tag1').onmouseover = slideout;
document.getElementById('tag1').onmouseout = slidein;
}
And I tried do using the code below but that didn't work. It would trigger all the function buy it self.
window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out
function sliding() {
for (var i = 0; i < tags.length; ++i) {
document.getElementById('tag1').onmouseover = setslideout(tags[i],pics[i]);
document.getElementById('tag1').onmouseout= setslidein(tags[i],pics[i]);
}
}
Here is full code
window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out
function sliding() {
/*for (var i = 0; i < tags.length; ++i) {
setslideout(tags[i],pics[i]);
}/*/
document.getElementById('tag1').onmouseover = slideout;
document.getElementById('tag1').onmouseout = slidein;
}/*
function setslideout(tagsid,picsid){
document.getElementById(tagsid).onmouseover = slideout(tagsid,picsid);
}*/
function slideout(){
//alert('over '+ lid);
if(currpos('popout1') < 200){
document.getElementById('popout1').style.left = currpos('popout1') + 10 + "px";
var timer = setTimeout(slideout,10)
}else{
clearTimeout(timer);
}
}
function slidein(){
//alert('over '+ lid);
if(currpos('popout1') > 0){
document.getElementById('popout1').style.left = currpos('popout1') - 20 + "px";
var timer2 = setTimeout(slidein,10)
}else{
clearTimeout(timer2);
}
}
function currpos(element){
return document.getElementById(element).offsetLeft;
}
Here what im trying to to http://signsourceak.com/index2.html (first link in the drop down works )

Here's a version of your code modified to use closures, hopefully this does the trick:
window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out
function sliding() {
for (var i = 0; i < tags.length; ++i) {
document.getElementById(tags[i]).onmouseover = (function(j){
return function(){
setslideout(tags[j], pics[j]);
}
})(i);
document.getElementById(tags[i]).onmouseout = (function(j){
return function(){
setslidein(tags[j], pics[j]);
}
})(i);
}
}