We Keep Coding

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

Can't save canvas as image on Edge browser

I am using fabric js for my web application. For saving HTML5 canvas as image using fabric js, I found the following code which works in chrome and firefox browser. But when i run th same code in microsoft edge, the browser just opens a blank new window without any image on it.
$(".save").click(function () {
canvas.deactivateAll().renderAll();
window.open(canvas.toDataURL('png'));
});
However I also tested many fiddle projects which shows how to convert canvas to an image. Those fiddles works on chrome but not in edge. An example fiddle is here

If you will use FileSaver.js it will download on Edge. For using FileSaver.js you need to convert base64 data into the blob data. To do that, please check this post on StackOverflow
Here is an updated fiddle
You need to include FileSaver.js into your project, and your save button will have the following code:
$("#canvas2png").click(function(){
canvas.isDrawingMode = false;
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
var blob = new Blob([b64toBlob(canvas.toDataURL('png').replace(/^data:image\/(png|jpg);base64,/, ""),"image/png")], {type: "image/png"});
saveAs(blob, "testfile1.png");
});
Alternative, quick and dirt solution is to write html data into new tab, and right click on the image and save it. This solution is not required any plugins or libraries.
Your save will simply change to:
$("#canvas2png").click(function(){
canvas.isDrawingMode = false;
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
var html="<img src='"+canvas.toDataURL()+"' alt='canvas image'/>";
var newTab=window.open();
newTab.document.write(html);
});

Check the modified fiddle:
http://jsfiddle.net/9hrcp/164/
document.getElementById('test').src = canvas.toDataURL('image/png');
i added an image tag and and set the src attribute to the dataUrl to the image and it loads fine.
So edge is generating a correct png, is refusing to load it as a dataUrl redirect. May be a feature and not a bug.

javascript image onload has 0 width and 0 height

I am loading an image from the file system and then I want to resize the image. it works fine in all browsers except for IE (11). Problem is that the image is loaded, but the width and height are 0.
I am out of options so I am posting this question here.
This is the code
function getAsImage(readFile, chatboxtitle) {
var reader = new FileReader();
reader.readAsDataURL(readFile);
reader.onload = addImg;
}
function addImg(imgsrc) {
var img = document.createElement('img');
img.setAttribute("src", imgsrc.target.result);
console.log(img);
console.log(img.width + " "+img.height);
... a lot of cool stuff happens here but it doesn't work because width is 0
}
OK, so the console prints the image which is like
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAH0CAYAAAHUIW ... and much more.. >
So the image IS there. All browsers work fine except IE.
I tried to play with setting some IMG properties like style, width but none work.
Note, I am not a hardcore JavaScript developer. Maybe I am missing something. Is the DOM element not found?
UPDATE
I tried the answer below yesterday and it was working. But I tried the solution today and it is not working anymore. Try this fiddle .
It is not working in IE11 on Windows7 but it is on IE11 on Windows8.

Weird IE behaviour. It turns out that you need to set src using
img.src = src_goes_here
Not via setAttribute
(function(doc){
doc.getElementById('file').addEventListener('change', readFile);
function readFile(ev) {
var file = this.files[0],
reader;
if(file) {
reader = new FileReader();
reader.onload = getSize
reader.readAsDataURL(file);
}
}
function getSize(ev) {
var img = doc.createElement('IMG');
img.src = this.result; //wors in IE11
//img.setAttribute('src', this.result); //doesn't work
console.log(img.width, img.height);
}
}(document))
Demo.
UPD: Some additional research shows that in order to make IE to calculate image sizes when you set src using img.setAttribute you need to actually attach the image to the document. For example
document.body.appendChild(img);
Another Demo.

detecting img loads in javascript

I have a function where I get the img src value as the parameter, what I want to do is check to see if that image loads with a 200 ok or 404/some other error. If it gets a 200 ok, then I want to inject an img tag with that src into the DOM(I reason that during checking,it also gets loaded into the browser cache and injecting that img tag into the DOM loads it from the cache ). I tried with a simple snippet of code as follows :
function checkImage(src)
{
var img = new Image(),
tag = '<img src="'+src+'" />',
alt = '<span>sorry,image broken</span>';
img.onload = function(){
$('.some-container').html(tag);
};
img.onerror = function(){
$('.some-container').html(alt);
};
img.src = src;
}
It worked fine in chrome, but went havok in firefox and ie(both of them are firing only the error event no matter whether the image loaded fine or broke). Instead of using onload and onerror, I tried it using jquery like :
$(img).load(...).error(...).attr('src',url);
$(img).on('load',...).on('error',...).attr('src',url);
$('<img />').load(...).error(...).attr('src',url);
$('<img />').on('load',...).on('error',...).attr('src',url);
and even tried the jquery.imagesLoaded plugin by desandro(https://github.com/desandro/imagesloaded) like :
$(img).imagesLoaded().done(...).fail(...);
$(img).imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
$('<img />').imagesLoaded().done(...).fail(...).attr('src',url);
$('<img />').imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
I also tried the solutions from :
jQuery callback on image load (even when the image is cached)
https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8
but as it turns out, works in chrome, but not in FF or IE, is there any solution where I can check for an image which is present in memory but not in the "DOM" ? Thanks in advance.

You have to check for image onload after setting a source to it.
var img = new Image();
//set source to the image
img.src = "set/image/source/path"
img.onload = function(){
//if image load is successful
//create an jQuery object out of this image
var jQimage = $(this);
$('.myContainer').html(jQimage);
}
Also note that jQuery load function cannot guarantee you a cross browser check for image loading as mentioned in jQuery docs
So, the best approach is to check onload with native javascript and create an jQuery object if necessary to make use of jQuery methods.

Have a look at what w3schools has to say about the Image() javascript object.
http://www.w3schools.com/jsref/dom_obj_image.asp
onabort - Loading of an image is interrupted, W3C YES
onerror - An error occurs when loading an image, W3C YES
onload - An image is finished loading, W3C YES
also the complete property of the Image() object, determines if the browser is finished loading an image, Unfortunately this particular property is not W3c
hope that helps a little
PS: After having a little Google search I found this Q/A from Stack overflow.
Cross-browser image onload event handling

How to load an image asynchronously?

I'm loading an image onto a texture map with GLGE (sorta like webGl). However for the sake of loading speed I'm loading a low resolution image first (which would be quicker) and then want to change the src to the high resolution image once the large image is loaded. This is what I'm doing now
var texture = new GLGE.texture();
function updateTexture(){
var image=new Image();
image.src = "models/testLargeMap_map0.jpg"; // load image
image.onload = function(){
texture.image("models/testLargeMap_map0.jpg"); // supposedly swap image on load (not working as I thought)
}
}
However, when during this period of changing the src, the model and all its functions freeze. How do I make it load the image asynchronously and on load swap it to the higher texture for a smooth instantaneous texture change?

You can set an image.onload event handler like this:
var big_image = new Image();
big_image.onload = function () {
texture.image("models/testLargeMap_map0.jpg");
}
big_image.src = "models/testLargeMap_map0.jpg";
(Note that I set the onload handler first, then set the src attribute. If I do it the other way around, it fails in IE).
This will preload the image before calling texture.image. I don't know anything about this library though, so I can't be certain it will use the pre-loaded image.

The image.src will be requesting the image from the server and it will initiate the onload event, and again u are requesting the image to be swapped so it is getting freezed. Why do you need this approach. You can have better way of doing this like, allow the low resolution image to be loaded first then assign the onmouseover or onclick event for the image on that time u can show a popup like shown on google images and then in it just display the high resolution images. On that time u will be requesting a single image the process will be quicker.
Hope this helps you

I'm not familiar with "GLGE" but it looks like the problem is that the method .image() loads the image again (kind regardless if that happens in the load event handler for the same image).
So unless you can set the image reference directly, like
texture = this; // within the load handler
there is no way to accomplish it with this library.