We Keep Coding

How to load an image generated by an aspx file into html

The following image: http://www.oscn.net/dockets/GetDocument.aspx?ct=tulsa&cn=SC-2011-361&bc=1014242988&fmt=tif
How would I go about downloading this image and displaying it in html using javascript?

Here you go..
If you need to modify any properties of the image (size/color enhancement/etc.) use new_elem.setAttribute('attribute', 'value'); Just like in HTML <img attribute="value" />
var element = document.getElementById('mytargetlocation');
var new_elem = document.createElement('img');
var locationtoimage = 'https://www.sourcecertain.com/img/Example.png';
/*
Note: if your site uses HTTPS, this file will need to be loaded
over HTTPS, if it doesn't, you could just use the original
URL without downloading the image at all
*/
new_elem.setAttribute('src', locationtoimage);
new_elem.setAttribute('alt', 'image not found at specified URL');
element.append(new_elem);
<div id="mytargetlocation"></div>

Preloading img and inserting src into another img without reloading it

I'm trying to preload an image via javascript and insert it into another image at the right moment without a new fetch.
Unfortuantely, when I replace the src of an img with the preloaded src, the image gets reloaded and chrome doesn't use the cashed one. What can I do?
This is how I preload the image:
if (document.images) {
this.img = new Image();
this.img.src = "img/img.jpg";
}
and later I'm inserting it like this:
this.poster.src = this.img.src;
Thanks!

Actually this code works fine. I was using a preprocessor that would prohibit caching. On the server everything works fine

Load two images in a single img tag one after another

I want to load two images in a single <img /> tag. First small image will be shown by src attribute and second large image will be inside data-src attribute but one image will be shown at once, that will be in src attribute. I want when page load small image will be load and show first and after completing loading of large image in the background it will be replaced by small image so that we can see large image. I have the code that will take large image from data-src attribute and place large image in src attribute.
$(document).ready(function(){
$("#image4").load(function(){
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} }
});
});
I want to do this because I don't want to wait for long time to load large image, instead I want to see the small image first. I am facing the problem when page load, it's loading small and large images in parallel. For your information images have the drag and zoom functionality.
Current live code is here: http://virtualepark.com/new1/demo.html

The code you posted here is not deployed on your server - there is some other stuff using the mousewheel-event.
Try loading the big image hidden in the background and once its loaded, set the url of the visible image:
//get all images
$('img').each(function(i, img) {
var img = $(img);
//if they have a data-src
if(img.attr('data-src')) {
//register for the load-event for the initial image
img.one('load', function() {
//if small image is loaded, begin loading the big image
//create new hidden image
var hiddenImg = new Image();
hiddenImg.onload = function() {
//if the hidden image is loaded, set the src-attribute of the
//real image (it will show instantly)
img.attr('src', img.attr('data-src'));
};
//trigger loading of the resource
hiddenImg.src = img.attr('data-src');
});
});
});
(credits to Load image from url and draw to HTML5 Canvas)

you can load to hidden tag and after load complet change them.

you can try to start the loading after the image is loaded.
$('img').load(function(){
var bigImgSrc = $(this).data('src');
var img = $(this);
if(bigImgSrc != img.prop('src')){
var bigImg =$('<img>').prop('src', bigImgSrc);
bigImg.load(function(){
img.prop('src', bigImgSrc);
});
}
});
I'm not 100% sure if you need to append the bigImg to the DOM or if it also loads like this. If you need to add it to the DOM use bigImg.hide().appendTo('body') and then use the remove funtion when loaded.
You should also be aware that the load-function not work in all cases, see https://api.jquery.com/load-event/
edit there was in an infinity loop in the prev. code example

FBJS setStyle( {backgroundImage}) not working?

i am trying to add some images to my facebook tab-app via FBJS.
The Problem:
I can't see the images and I don't know why.
The FBJS code
url = "http://www.domain.de/image.gif";
myImg = document.createElement('img');
myImg.setStyle( {backgroundImage: 'url('+url+')' });
document.getElementById('wrapper').appendChild(myImg);
The rendered html
<img style="background-image: url("http://www.domain.de/image.gif";);">

Try modifying your code like this and specify the src attribute of the image:
url = "http://www.domain.de/image.gif";
myImg = document.createElement('img');
myImg.setSrc(url);
document.getElementById('wrapper').appendChild(myImg);

You're really thing to set the background image of an img element? That seems...odd. Are you sure you don't just want to do a normal img element (Sarfraz may have you covered there if so) or specify the background image of the wrapper element? E.g.:
url = "http://www.domain.de/image.gif";
document.getElementById('wrapper').setStyle( {backgroundImage: 'url('+url+')' });
I've marked this CW because I've never done any FBJS, so could be talking through my hat. :-) If it helps, it helps.

How to display image from JavaScript

How to display an image using JavaScript from an array creating in JavaScript.
Any help please?
Thanks.

If you've got an image tag in your HTML layout, with a given id, you can control its content with javascript:
function updateFullImage(id, url) {
var img = document.getElementById(id);
img.src = url ;
}
and the browser (FF at leat) will automatically reload your image

You can create an image in JavaScript: var img = new Image(); img.src = "path-to-image"; and then add it to the DOM (depending on if you're using a js library like jQuery or not this will vary in complexity). Can you be more specific as to your circumstances?