I'm trying to assemble and display image slices which have been preloaded into a two dimensional array, but the code is only showing placeholders instead of the images.
The image slices have been preloaded with a javascript function, but when I use a second javascript function to retrieve and assemble the image slices I'm just getting placeholders instead of the images. The first javascript function to preload the image slices is called at the bottom of the head section in the HTML page and uses a query string to retrieve part of the image file name (queryData[2]), the second javascript function to assemble the images is in the body tag and called as onload=assembleImage();. I've used console.log in both functions which have shown the image slices are present. Is there a reason why I'm only getting placeholders instead of images? My code is below.
// First function to preload image slices into a two dimensional array.
function preloadImages(){
preloadImages = [];
var row = 5;
var col = 5;
for (var r = 0; r < row; r++){
preloadImages[r] = new Image();
for (var c = 0; c < col; c++){
preloadImages[r][c] = new Image();
preloadImages[r][c].src = queryData[2] + "_" + (r) + "_" + (c) + ".jpg";
}
}
//console.log(preloadImages[r][c]);
}
// Second function to retrieve and assemble image slices.
function assembleImage(){
var row = 5;
var col = 5;
var assembleImage = document.getElementById("prodImage");
var imageTable = "
";
for (var r = 0; r < row; r++){
imageTable += "
";
for (var c = 0; c < col; c++){
imageTable += "
";
imageTable += " ";
imageTable += " | ";
console.log(preloadImages[r][c])
}
imageTable += "
";
}
imageTable += "
";
assembleImage.innerHTML = imageTable;
}
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
