Develop Reference

Javascript: Append and Remove Image from a DIV in setTimeout loop

I'm trying to load an image into a div using JavaScript. Below is the current snippet of the code.
window.onload=function image_show() {
var thumbContainer = document.getElementById("art_img");
var thumbnail = document.createElement("img");
var img_width = document.getElementById("art_img").offsetWidth;
var img_height = document.getElementById("art_img").offsetHeight;
thumbnail.onload=function() {
thumbContainer.appendChild(thumbnail);
}
thumbnail.src = "http://xyz/bkg.png";
thumbnail.width = img_width;
thumbnail.height = img_height;
setTimeout(image_show, 1000 );
}
The appendChild() method keeps appending the images (one below the other) after the Timeout. But I want to actually keep refreshing the div with the same image.
The source of the image will be updated on my website with the same name, and I want the script to display the new image after Timeout. I tried inserting a removeChild() method just before appendChild(), but didn't work as expected. Any help will be appreciated.

just empty the element before you append again
thumbnail.onload=function() {
thumbContainer.innerHTML = ""; // ADD THIS LINE
thumbContainer.appendChild(thumbnail);
}

The problem is that the browser caches the image.
Try appending a timestamp to the src attribute of the thumbnail:
thumbnail.src = "http://xyz/bkg.png?ts=" + Date.now();
This way, the source URL will be slightly different each time the image_show function runs and the picture should be loaded by the browser each time.

Is it possible to set the equivalent of a src attribute to the first img src of a page in html and javascript?

I am probably missing something simple but it's quite annoying when everything you read doesn't work.
I am trying to set the "throbber" img src to the first img src of a webpage. So far, I've got:
<script type="text/javascript">
var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src; // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);
Would it be possible to implement this with html only?
And
<div id="throbber"><img src="http://www.cloudaccess.net/images/Google-Chrome-Extensions.jpg" /></div>
Is it possible to change the img src to the first img src of a page depending on the website?

Yes it is. Try following code:
window.onload = function(){
var divEl = document.getElementById('throbber');
var image = divEl.getElementsByTagName('img')[0];
// set the new image
image.src= 'https://your/new/image.png';
}
Note that we need to take advantage of window.onload in order to make sure DOM is ready before manipulating it.
See this JSfiddle DEMO

If your throbber image is in the website from which you're trying to pull the image, you can use jquery like this:
$(function (){
// get the src of the first image that is not your throbber image
var src = $('img:not("#throbber img")').attr('src');
// set the throbber image to this src
$('#throbber img').attr('src', src);
});

Create an img element into <a> tag using javascript

I want to embed an image inside an tag after the image on tag loaded.
So the sequence goes like this...
<a id="anchorID">
<img onload="MyFunc(anchorID)>IMAGE1</img>
//..After image 1 loaded add
<img>IMAGE2</img>
</a>
<script>
function MyFunc(anchorID)
{
var anchorElement = document.getElementById(anchorID);
//I want to create an image tag inside the anchorElement
}
</script>
Thanks for the help.. T_T

Here's a solution, just add onload="addNextImage('#id_in_which_to_add_new_image', 'second_image_url')" to the image you want to load first. In the next example, ignore the width and style (I put them there to be able to test the functionality, making the image smaller so I don't need to scroll to see the behavior - I chose a huge image to make sure everything works as it should, and the border makes it appear sort of like a progress bar =)
<script>
function addNextImage(selector, url) {
var where = document.querySelector(selector);
if (where) {
var newImage = document.createElement('img');
newImage.src = url;
where.appendChild(newImage);
}
}
</script>
<a id="anchorID">
<img onload="addNextImage('#anchorID', 'http://animalia-life.com/data_images/wallpaper/tiger-wallpaper/tiger-wallpaper-01.jpg')" src="http://hubblesource.stsci.edu/events/iyafinale/support/documents/gal_cen-composite-9725x4862.png" width="400px" style="border: 1px solid black" />
</a>
This should work on most browsers today: IE8+ (as long as you use basic CSS2.1 selectors as the first argument), and pretty much everything else in use. (IE8+ because it depends on querySelector)

I think what you are looking for is
Javascript appendChild()
var node = document.createElement("img");//Create a <img> node
node.src="SomeImageURL";
firstImage.appendChild(node);
JQuery append()
$("#firstImageID").append("<img src="SomeImageURL"/>");
see links for more info
Javascript
jQuery

You can use the following to add an image to the anchor tag
function MyFunc(anchorID) {
var anchorElement = document.getElementById(anchorID);
if (anchorElement) {
//I want to create an image tag inside the anchorElement
var img = document.createElement("img");
img.setAttribute("src", "yourImagePath");
anchorElement.appendChild(img);
}
}
Hope that helps.

Determine when an image has loaded in svg with RaphaelJS

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?

Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

image returns value "null"

I have a javascript code that points to an image using getElementById. But when I debug it in firebug, it says that my variable has a value of "null". Here is my code:
var image = document.getElementById('myImage');
image.src = "imageone.png";

That's because there is no element with that id.
If the element actually have that id, then the reason is that the element hasn't been parsed yet when the code runs. Put it in the load event to run it after the entire page has been parsed:
window.onload = function() {
var image = document.getElementById('myImage');
image.src = "imageone.png";
};
Alternatively, you can put the script block in the body element, below the image tag.