We Keep Coding

Loading images with javascript

By clicking on the button , the random two pictures should appear of 12 included in two boxes.But something goes wrong.Need advice to solve this this problem.
var startBtn = document.getElementById("start-button");
var imgBox1 = document.getElementById("firstBox");
var imgBox2 = document.getElementById("secondBox");
var images = [
'/assets/img/pic1.png',
'/assets/img/pic2.png',
'/assets/img/pic3.png',
'/assets/img/pic4.png',
'/assets/img/pic5.png',
'/assets/img/pic6.png',
'/assets/img/pic7.png',
'/assets/img/pic8.png',
'/assets/img/pic9.png',
'/assets/img/pic10.png',
'/assets/img/pic11.png',
'/assets/img/pic12.png',
];
function loadImages(imgArr){
for(var i=0; i< imgArr.length; i++) {
console.log(imgArr[i]);
var img = new Image();
img.src = imgArr[i];
document.getElementById('output').appendChild(img);
}
}
startBtn.onclick = function(){
imgBox1.style.backgroundImage = images[Math.floor(Math.random()*images.length)];
imgBox2.style.backgroundImage = images[Math.floor(Math.random()*images.length)];
}

You need to use CSS's url function when setting the background image:
startBtn.addEventListener("click", function() {
imgBox1.style.backgroundImage = `url('${images[Math.floor(Math.random() * images.length)]}')`
imgBox2.style.backgroundImage = `url('${images[Math.floor(Math.random() * images.length)]}')`
});

You didn't add a button with id start-button by which you want to click. Essentially you are clicking on nothing.
<button type="button" id="start-button" style="">Start</button>

What is wrong with my image slide show code?

I'm trying to make an image cycle through a set of images, when you click a button. Why won't it work? I want to make sure the images are preloaded, so that it will not make the website slower.
var ImageSet = new Array();
ImageSet[0] = ImageOne;
ImageOne = newImage();
ImageSet[0].src = 'Website/Images/CoverPhotos/LogoCover.jpg';
ImageSet[1] = ImageTwo;
ImageTwo = newImage();
ImageSet[1].src = 'http://p1.pichost.me/i/64/1886374.jpg';
ImageSet[2] = ImageThree;
ImageThree = newImage();
ImageSet[2].src = 'http://abduzeedo.com/files/originals/5/50cuteanimpic6.jpg';
ImageSet[3] = ImageFour;
ImageFour = newImage();
ImageSet[3].src = 'http://www.onsecrethunt.com/wallpaper/wp-content/uploads/2015/01/Cool-Wallpapers-Card-Pictures-1200x675.jpg';
var ImageSwitchNo = 0;
function Change() {
if (ImageSwitchNo < 3) {
ImageSwitchNo++;
}else {
ImageSwitchNo = 0;
}
var ImageSrc = document.getElementById('HeaderPhotoImage').innerHTML;
ImageSrc.src = ImageSet[3];
}

You are giving ImageOne a value on line three after trying to store it in the array on the line before it.
Instead of this:
var ImageSet = new Array();
ImageSet[0] = ImageOne;
ImageOne = newImage();
ImageSet[0].src = 'Website/Images/CoverPhotos/LogoCover.jpg';
try doing it like this for all of them:
var ImageSet = [];
ImageOne = newImage(); //gives ImageOne a value.
ImageSet[0] = ImageOne; //THEN sets the index of ImageSet to that value.
ImageSet[0].src = 'Website/Images/CoverPhotos/LogoCover.jpg';

Your code may work if you change the second line from bottom,
ImageSrc.src = ImageSet[3];
to
ImageSrc.src = ImageSet[ImageSwitchNo];

Slow loading of page javascript

I have this javascript code.
<!-- //////////////////// IMAGE 1 //////////////////// -->
var i = 1;
var Imgt2e10 = Array.apply(null, new Array(10)).map(function() {
var img = new Image();
img.src = "img/t2/t2e10/"+(i++)+".jpg"
return img
});
function RollOvert2e10(i) {
document.t2e10.src=Imgt2e10[i].src;
}
<!-- //////////////////// IMAGE 2 //////////////////// -->
var i = 1;
var Imgt2e2 = Array.apply(null, new Array(10)).map(function() {
var img = new Image();
img.src = "img/t2/t2e2/"+(i++)+".jpg"
return img
});
function RollOvert2e2(i) {
document.t2e2.src=Imgt2e2[i].src;
}
<!-- //////////////////// IMAGE 3 //////////////////// -->
var i = 1;
var Imgt2e3 = Array.apply(null, new Array(10)).map(function() {
var img = new Image();
img.src = "img/t2/t2e3/"+(i++)+".jpg"
return img
});
function RollOvert2e3(i) {
document.t2e3.src=Imgt2e3[i].src;
}
Each of these bits of code applies to one image. In this example I have 3 images but in my website I have more than 50 and it's taking too long to load the web page.
Is it because I'm repeating the code over and over or because I have too many images (small jpg's) loading at the same time?
How can I make this code shorter and elegant? Or at least the loading faster...
Any help is appreciated!

As we discussed previously, the slowdown is most certainly caused by the size of the images. Now for some less cumbersome JS code, I would propose something like that:
function Loader (basename)
{
this.image = {};
this.basename = basename;
}
Loader.prototype = {
load: function (name)
{
this.image[name] = new array(10);
for (var i = 0 ; i != 10 ; i++)
{
this.images[name][i] = new Image ();
this.images[name][i].src = "img/"+basename+"/"+name+"/"+i+".jpg";
}
},
rollover: function (name, index)
{
document[name].src = image[name][index].src;
}
}
var loader = new Loader("t2"); // create a loader for the t2 folder
loader.load ("whatever"); // load an image collection
loader.rollover ("whatever", 5); // roll over to the 5th image

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?

Write arrays content in my page using javascript

I'm studying javascript for the first time and I've some doubt: I have two arrays; the first one contain the image of a person, the second one his personal informations (the arrays' length is the same because they contain the same number of people). I'd like to write the content in my page so print the image and the infos of the first user, then the image and the infos of the second and so on...
How can I do it?
this is the code:
function jsonCard()
{
var richiestaCard = new XMLHttpRequest();
richiestaCard.onreadystatechange = function()
{
if(richiestaCard.readyState == 4)
{
var objectcardjson = {};
window.arrayCard= []; //creazione dell'array che conterrà le cards
objectcardjson = JSON.parse(richiestaCard.responseText);
arrayCard = objectcardjson.cards; //the first array
}
}
richiestaCard.open("GET", "longanocard.json", true);
richiestaCard.send(null);
}
function jsonEntity()
{
var richiestaEntity = new XMLHttpRequest();
richiestaEntity.onreadystatechange = function()
{
if(richiestaEntity.readyState == 4)
{
var objectentityjson = {};
window.arrayEntity= []; //creazione dell'array che conterrà le entity
objectentityjson = JSON.parse(richiestaEntity.responseText);
arrayEntity = objectentityjson.cards; //the second array
}
}
richiestaEntity.open("GET", "longano.json", true);
richiestaEntity.send(null);
}
function displayArrayCards()
{
jsonCard();
jsonEntity();
var inizioTag = "<img src=";
var fineTag = "\>";
for(i = 0; i < arrayCard.length; i++)
{
...
}
}
I'd like to have the image and then the infos (for the first user), the image and the infos for the second and so on all included in a div.

Try something along the lines of
function displayArrayCards()
{
jsonCard();
jsonEntity();
var wrapper = document.getElementById('div you want to put all of these users into');
for(i = 0; i < arrayCard.length; i++)
{
var userDiv = document.createElement('div');
var cardImg = document.createElement('img');
img.src = arrayCard[i];
/** Set other attributes for img **/
var entityDiv = document.createElement('div');
entityImg.innerHTML = arrayEntity[i];
/** Set other attributes for div **/
userDiv.appendChild(cardImg);
userDiv.appendChild(entityDiv);
wrapper.appendChild(userDiv);
}
}
Honestly there are a lot of ways to do this. Above is simply what I would do.