We Keep Coding

how to use drawImage after load all images in array

I want to draw image array with drawImage after all the images are loaded.There is a render problem with drawImage(), tried to solve with setTimeout() but its not working all the time.
Here is my code;
while(FocusItem.length>0)
{
FocusItem.pop();
}
ftx=canvas.getContext('2d');
focusImageBackground = new Image();
focusImageBackground.src = "./images/odaklanma/odaklanmaBackground.jpg";
if(RandomSoru==15)
finishSoru=true;
if(finishSoru)
{
RandomSoru = Math.floor((Math.random() * 15)+1);
tempRandomSoru=RandomSoru;
}
if(RandomSoru==tempRandomSoru)
{
RandomSoru = Math.floor((Math.random() * 15)+1);
}
var soru = new Object();
soru["image"] = new Image();
soru.image.src = './images/odaklanma/level/'+RandomSoru+'/soru.png';
soru["x"] = 341;
soru["y"] = 140;
FocusItem.push(soru);
var dogru = new Object();
dogru["image"] = new Image();
dogru.image.src = './images/odaklanma/level/'+RandomSoru+'/dogru.png';
dogru["x"] = xDogru;
dogru["y"] = 280;
FocusItem.push(dogru);
var yanlis = new Object();
yanlis["image"] = new Image();
yanlis.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis.png';
yanlis["x"] = xYanlis1;
yanlis["y"] = 280;
FocusItem.push(yanlis);
var yanlis2 = new Object();
yanlis2["image"] = new Image();
yanlis2.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis1.png';
yanlis2["x"] = xYanlis2;
yanlis2["y"] = 280;
FocusItem.push(yanlis2);
}
if(focusImageBackground.complete){
if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
drawFocus();
else
setTimeout(drawFocus,600);
}
else
focusImageBackground.onload=function(){
if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
drawFocus();
else
setTimeout(drawFocus,600);
}
function drawFocus(){
ftx.drawImage(focusImageBackground,0,0);
for (var i=0; i<FocusItem.length; i++){
FocusItem[i].image.onload=function(){
ftx.drawImage (FocusItem[i].image, FocusItem[i].x, FocusItem[i].y);
}
}
}

I'd suggest loading all your images, then when they are all done, you can call the rest of your code. I don't quite follow what you're trying to do with all the rest of your code, but here's a simple way to load an array of image URLs and know when they are done.
This is the general idea (I've left out lots of your code that has nothing to do with the central issue of knowing when all the images are loaded) and I've also tried to DRY up your code:
function createImagesNotify(srcs, fn) {
var imgs = [], img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
imgs.push(img);
img.onload = function() {
--remaining;
if (remaining == 0) {
fn(srcs);
}
};
// must set .src after setting onload handler
img.src = srcs[i];
}
return(imgs);
}
// here's your starting array of filenames
var fnames = ["soru.png", "dogru.png", "yanlis.png", "yanlis1.png"];
// insert your process to create RandomSoru here
var randomSoru = ....;
// build full urls array
var urls = [];
for (var i = 0; i < fnames; i++) {
urls.push('./images/odaklanma/level/' + RandomSoru + '/' + fnames[i]);
}
// load all images and call callback function when they are all done loading
var imgs = createImagesNotify(urls, function() {
// all images have been loaded here
// do whatever you want with all the loaded images now (like draw them)
});
This code is based on an earlier answer of mine here: Cross-browser solution for a callback when loading multiple images?

Detect img src and then change it with javascript

This is my code:
var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
document.getElementById('next').onmousedown = function () {
i = 0;
// it works up to here
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
}
});
return true;
};
It should work on imgur's horizontal layout albums, and replace the low-res images with full-res ones, one image at a time (currently displayed image).
On click of the "next" button, a new image is displayed. However, the script does not load the next full-res image. It only works with the first image loaded.

You're messing up your scope completely, invalidating the entire code after the first run. This should also pop up more than enough errors in your console. Reshuffle assignments to the right spot:
document.getElementById('next').onmousedown = function () {
var i;
var pic = document.getElementById('image');
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
}
});
return true;
};
Depending on how the page works specifically (I can't see without having a real world use case) you might have to reassign the entire mousedown event as well.

On every mousedown you are adding a new DOMAttrModified event listener.
Try arranging your code to something like following:
var pic = document.getElementById('image');
var i;
pic.addEventListener("DOMAttrModified", function(event) {
if (i == 0 && event.attrName == "src") {
//pic = document.getElementById('image');
i = 1; // this is to prevent endless loop
picSrc = pic.src;
fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
i = 0;
});
document.getElementById('next').onmousedown = function () {
var picSrc = pic.src;
var fullSrc = picSrc.split('h.jpg')[0] + '.jpg';
pic.src = fullSrc;
});
You should also try using the addEventListener instead of onmousedown

how to assign images using javascript to div

function ft1(){
var imgSrcs = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif'];
var myImages = [], img;
for (var i = 1; i <=8; i++) {
img = new Image();
img.onload = function() {
var div0 = document.getElementById(i);
div0.style.backgroundImage = "url(" + this.src + ")";
};
img.src = imgSrcs[i];
myImages[i] = img;
}
}
<input name="Button1" type="button" value="button" onclick="ft1();" />
my div ids are 1 to 8. i want to add images for that dives using javascript.but this code didn't work properly. if u know where is the error plz tel me.

I made some changes in your code:
function ft1() {
var imgSrcs = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif', '7.gif', '8.gif'];
var myImages = [];
for (var i = 1; i <= imgSrcs.length; i++) {
var img = new Image();
img.src = imgSrcs[i];
var div0 = document.getElementById(i);
//I am not sure what you are trying to do in the below line.
//div0.style.backgroundImage = "url(" + this.src + ")";
div0.appendChild(img);
myImages[i] = img;
}
}
AFAIK, img.onload will not work because img variable is not part of DOM. First you need to make it part of DOM using appendChild method as shown above.
I have one question, what does this.src referring to?

try using this code in the loop
var elem = document.createElement("img");
elem.src = this.src;
elem.setAttribute("height", "250");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "alt text");
document.getElementById("placehere").appendChild(elem);
good luck!

I think You should use imgSrcs[i] instead of this.src

<script type="text/javascript">
var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif");// list of images
function changeImg(that) // function call on_click of image below
{
var newImgNumber = Math.round(Math.random()*3); // create math to random the images
while (that.src.indexOf(myImages[newImgNumber]) != -1) // make sure that the randomization corresponds to the list of images
{
newImgNumber = Math.round(Math.random()*3) // sets the math to the new image
}
that.src = myImages[newImgNumber]; // change the image
return false; // makes it able to be done again
}
</script>

If you are trying to add images to all the divs, I would try simplifying it to:
function ft1(){
var imgSrcs = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif'];
for (i = 1; i <=8; i++) {
var div = document.getElementById(i);
div.style.backgroundImage = "url(" + imgSrcs[i] + ")";//make sure images are in the right folder
}
}
<input name="Button1" type="button" value="button" onclick="ft1()" /> //remove semicolon
Here is a link to a jsfiddle with color instead of images http://jsfiddle.net/CKFrantz/gLfXA/

The problem with the loop is probably that the loop-counter will be the same in all of the callbacks. (Mind that the closures just share the same scope, so the value will be 8 for all of them after the loop is exited.)
This can be overcome by a factory function (passing a simple value as argument will result in it being copied):
function loadImageToElement(id, imgscr) {
var img = new Image();
img.onload = function() {
var el = document.getElementById(id);
el.style.backgroundImage = "url(" + this.src + ")";
// we could use just the same:
// el.style.backgroundImage = "url(" + imgscr + ")";
};
img.src = imgscr;
return img;
}
function ft1(){
var imgSrcs = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif'];
var myImages = [];
for (var i = 0; i < 8; i++) {
myImages[i] = loadImageToElement('div' + (i+1), imgSrcs[i]);
}
}
<input name="Button1" type="button" value="button" onclick="ft1();" />
Edit: you may want to check for img.complete:
function loadImageToElement(id, imgscr) {
var img = new Image();
var f = function() {
var el = document.getElementById(id);
el.style.backgroundImage = "url(" + imgsrc + ")";
}
img.src = imgscr;
if (img.complete) {
f();
}
else {
img.onload = f;
}
return img;
}
(Note: Image.complete is true, if the image is already cached. In this case the onload-event wont fire in some browsers.)

Why doesn't this Javascript image object get added to the image array?

I've been trying to create a small HTML5-based example, but I've ran into some problems. I want to render a rock on a <canvas> but this Javascript object won't work properly.
function ImageData() {
this.image_names = ["rock1"];
this.images = new Array();
this.loadResources = function () {
for (var i = 0; i < this.image_names.length; i++) {
var img = new Image();
img.onload = (function (a) {
a.images[a.image_names[i]] = img;
console.log(a.images); //log is successful, image is in array
})(this);
img.src = "images/" + this.image_names[i] + ".png";
}
}
}
It's use is to be as follows:
var a = new ImageData();
a.loadResources();
var rock1_image = a.images["rock1"]; //the "rock1.png" image
If you try accessing the object via console, you'll see that there is no image in the image array, after being certain the image loaded. I can't figure out why it's not working. I've looked over it multiple times.
EDIT: Here is my final, working result:
function ImageData() {
this.image_names = ["rock1"];
this.images = new Array();
this.loadResources = function (callback) {
for (var i = 0; i < this.image_names.length; i++) {
var img = new Image();
img.onload = (function (a, i) {
return function() {
a.images[a.image_names[i]] = img;
if (i == (a.image_names.length - 1)) callback();
};
})(this, i);
img.src = "images/" + this.image_names[i] + ".png";
}
}
}

I would venture to say that you are attempting to access it before it is added to your array. I would suggest adding a callback or something to your loadResources method to make sure that it's there before you attempt to access it.
this.loadResources = function (callback) {
for (var i = 0; i < this.image_names.length; i++) {
var img = new Image();
img.onload = (function (a, i) {
return function() {
a.images[a.image_names[i]] = img;
console.log(a.images); //log is successful, image is in array
callback();
};
})(this, i);
img.src = "images/" + this.image_names[i] + ".png";
}
}
then
var a = new ImageData();
var rock1_image;
a.loadResources(function() {
rock1_image = a.images["rock1"];
// do whatever you need to do with the image in here.
});
Also, what #Igor mentions. I totally missed that. I adjusted the code above so you could keep your this scope without having to set it elsewhere.
Updated to take care of the i issue brought up by #RobD.

Remove (this) after onload handler definition. You are actually calling this function right away, assigning undefined (since it returns nothing) as img.onload value.

In the code:
> function ImageData() {
> this.image_names = ["rock1"];
> this.images = new Array();
> this.loadResources = function () {
> for (var i = 0; i < this.image_names.length; i++) {
> var img = new Image();
> img.onload = (function (a) {
This function will be run immediately and does not return a value, so undefined will be assigned. So no point in the assignment, just run the code.
> a.images[a.image_names[i]] = img;
Images is an array that is used as a plain object. Better to use a plain object then.
> console.log(a.images); //log is successful, image is in array
> })(this);
The outer this must be passed in because of the IIFE. Remove the IIFE and there is no requirement to pass this. And if a reference to the instance is stored in the function, it won't matter how the function is called (i.e. you won't have to set this in the call).
> img.src = "images/" + this.image_names[i] + ".png";
> }
> }
> }
You might want something like:
function ImageData() {
this.image_names = ['rock1'];
this.images = {};
imageData = this;
this.loadResources = function (callback) {
for (var i = 0; i < imageData.image_names.length; i++) {
var img = new Image();
imageData.images[a.image_names[i]] = img;
img.src = 'images/' + this.image_names[i] + '.png';
if (callback) {
img.onload = callback;
}
}
}
}
var a = new ImageData();
a.loadResources(function(){console.log('loaded: ' + this.src);}); // loaded: …
window.onload = function() {
document.body.appendChild(a.images.rock1); // image appears in document
}

I haven't tested your code yet, but I guess this is the problem:
You are trying to access your image before it was loaded. You can use callback event handler after it was load like:
var data = new ImageData();
data.loadResources(function(imgObj){
// imgObj is the newly load image here. Have fun with it now!
})

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.