If I use new Image() to load up an image in JavaScript, will it use a cached version if possible, or will it always load up a fresh copy?
var imgObj = new Image();
imgObj.src = 'http://...';
imgObj.onload = function (loadedImg) { }
One thing to note is that if you want onload to always happen (even when it's in cache) you should define onload before src.
var imgObj = new Image();
imgObj.onload = function (loadedImg) { }
imgObj.src = 'http://...';
It'll load from cache if it's there, the same way a <img> in your markup would.
You can force a reload by adding a bogus query string argument. If your statement assigning a URL to the src property of the image is
imgObj.src = 'http://www.mySite.com/images/anImage.png';
you could render it as
imgObj.src = 'http://www.mySite.com/images/anImage.png?foo=0';
Just understand that on subsequent loads it will still use the cached copy unless you change the query string argument.
Related
I suspect this question may not meet the SO criteria as it's not reproducible. If I could reproduce it I'd probably know what was causing the issue.
I am trying to add an image to the DOM via js. I set the images src in the code and then mount it. The problem that I have is that, when only setting the src and mounting it, the image doesn't load. The element is there, but it has no size, and there was no network request for the image. the onload and onerror never fire either. The img is there and the src is correct, but no image is rendered, the size is 0x0.
It's created and mounted like this:
const image = new Image();
image.src = "my-url-here";
document.querySelector("a").after(image);
I can get this working in two ways. Set the src to blank first and then what I intend it to be:
const image = new Image();
image.src = "";
image.src = "my-url-here";
document.querySelector("a").after(image);
or by preloading the image elsewhere:
// immediately:
const image = new Image();
image.src = "my-url-here";
// ...
// some other place:
const image = new Image();
image.src = "my-url-here";
document.querySelector("a").after(image);
Either works fine and are somewhat viable, though not really preferrable solutions. My question, though, is this; why is this happening? I can't reproduce it anywhere else and so it's maybe specific only to the page I'm looking at (in which case perhaps there's not much help available).
If that's not answerable, then perhaps the question is, where can I look to try and get some information on this because it's incredible difficult to know where to start with this one.
When setting a HTMLImageElement's src property to a URL typically you need to listen to the 'load' event before getting width or passing to CanvasRenderingContext2D.drawImage() ect.
var image = new Image();
image.src = URL;
image.addEventListener('load', event => {
// image ready
});
But seemingly you don't need to listen to the 'load' event when setting a HTMLImageElement's src property to a dataURL(base64).
var image = new Image();
image.src = base64;
// image ready
Is setting a HTMLImageElement's src property to a base64 value synchronous or just really fast? Is this safe?
Got a image inside of a HTML document. Source is a base64 string. I want to retrieve the color of the pixel that is clicked on. Using a memory canvas all I get is zeros.
function getColor(imagecontainer,top,left){
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data;
console.log(myData, left, top);
};
image.src = imagecontainer.find("img").attr("src");
}
There are many other questions regarding the same problem, however none of the solutions could solve this problem for me. MyData always contains zeros.
Update based on new information:
The cause could simply be that the main image (imagecontainer.find("img")) isn't loaded at the time it is references.
If this image exists in DOM you can use windows.onload to run your script:
window.onload = function() {
// code that uses the image
};
as this will run only when everything has loaded incl. image data. Optionally add an inline onload handler to the image tag (not recommended), or add the src via JavaScript and monitor the onload event there.
Another possible cause is that if this is IE and the image is in the cache, onload may not trigger. You can check the image's complete property to check for this:
var image = new Image();
image.onload = onloadHandler;
image.src = imagecontainer.find("img").attr("src");
if (image.complete) onloadHandler();
function onloadHandler() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data;
};
Although you can use this directly with the original image without loading another with the same url.
does anyone know if it's possible to synchronously create an image object from a data uri using JavaScript? It is possible to create an image object from a data URI asynchronously like this:
imageObj = new Image();
imageObj.onload = function() {
callback(imageObj);
};
imageObj.src = dataURI;
You might think that this would work:
imageObj = new Image();
imageObj.src = dataURI;
callback(imageObj);
But if I remember correctly, this fails in some browsers.
Ideas?
I think you can use complete attribute of Image object.
http://www.w3schools.com/jsref/prop_img_complete.asp
Before calling callback function, in a loop, you can continuously check whether complete is true. Once its true, then it is loaded.
I want to get width of an external image with javascript.
I try this code :
var image = new Image();
image.src = "1.jpg";
alert(image.width);
but it get image width in firefox and get 0 in chrome.
why it not work in chromica?
Try
image.onload = function() {alert(this.width);}
You're trying to get the width before the image has been downloaded. You have to wait, e.g.:
var image = new Image();
image.onload = function() {
alert(image.width);
};
image.src = "1.jpg";
Note that it's important to hook onload before you set src, because otherwise you have a race condition. Even though JavaScript is single-threaded on browsers (unless you use web workers), the browser is not. It can fire the load event as soon as you set src and, seeing no handlers, not queue them for callback.