Javascript DOM Loading an array of images into a div background?
Question
Basically I have images in a folder named image0.png, image1.png, image(index).png and I want to load these images (preload so they don't take forever to load after the page loads) into an image tag within a div. The image tag is generated by DOM and then initialized to default parameters. The problem I'm having is that I can't seem to get the Document model to take the array full of images and just load it into the image tag IMGTG.src = IMGS[0]; ? Heres the code below
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
IMGS = new Array();
var IMGTG;
function INIT_IMGTG(id)
{
IMGTG = document.createElement("img");
IMGTG.setAttribute("height", "100%");
IMGTG.setAttribute("width", "100%");
IMGTG.setAttribute("border", "0");
}
function LOAD_IMGS()
{
var index = 0;
for(index = 0; i < 2; i++)
{
IMGS[i] = "image" + index + ".png"
}
}
function IMG_ARY(id)
{
LOAD_IMGS();
INIT_IMGTG(id);
IMGTG.src = IMGS[0];
}
</script>
</head>
<body onload = "IMG_ARY('IMG_ID')">
<div id="IMG_ID"></div>
</body>
</html>
EDIT: I made the edits as described below by the two answerers so far but still no luck? I'm not sure what gives, Javascript is a quirky language.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
IMGS = new Array();
var IMGTG;
function INIT_IMGTG(id)
{
IMGTG = document.createElement("img");
IMGTG.setAttribute("height", "100%");
IMGTG.setAttribute("width", "100%");
IMGTG.setAttribute("border", "0");
id.appendChild(IMGTG);
}
function LOAD_IMGS()
{
for(var i = 0; i < 2; i++)
{
IMGS[i] = "image" + i + ".png";
}
}
function IMG_ARY(id)
{
LOAD_IMGS();
INIT_IMGTG(id);
IMGTG.src = IMGS[0];
}
</script>
</head>
<body onload = "IMG_ARY('IMG_ID')">
<div id="IMG_ID"></div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2013-03-19 01:23:08
It looks like you've set the src of the image ( IMGTG ) correctly, as well as it's other properties, but you haven't actually inserted it into the DOM.
Try adding this to the bottom of IMG_ARY :
id.appendChild(IMGTG);
solution2
1 2013-03-19 01:42:44
appears to be with the for loop where i and index are interchanged but only index has been declared
change
var index = 0;
for(index = 0; i < 2; i++)
{
IMGS[i] = "image" + index + ".png"
}
to
for(var i = 0; i < 2; i++)
{
IMGS[i] = "image" + i + ".png";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.