This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery or JavaScript: Determine when image finished loading
The problem is known, but I can't find any simple solution:
var img = new Image();
img.onLoad = function() {
console.log("load"); // this event doesn't fire
};
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
I was looking for an implementation of onComplete event, but I can't find anything. Would you help?
The proper spelling of the event handler property is all lowercase .onload, not .onLoad.
var img = new Image();
img.onload = function() {
console.log("load"); // works every time
};
img.src = "img/domino/21.png";
Javascript is case sensitive so you MUST use the proper case for all object properties.
The alternatives besides .onload are to use:
img.addEventListener("load", function(e) {...});
or (in older versions of IE):
img.attachEvent("onload", function(e) {...});
If you're only using one event handler and you aren't using a cross platform library that already abstracts event handlers for you, then using .onload is the simplest.
And, here's a simple cross browser way to add event handlers:
// add event cross browser
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}
var img = new Image();
img.onload = function() {
console.log("load");
};
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
In Chrome,Firefox and Safari
var img = new Image();
img.addEventListener('load',function() {
console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
Or in IE or Opera
var img = new Image();
img.attachEvent('onload',function() {
console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete); // false
setTimeout(function() {
console.log(img.complete); // sometimes true, sometimes false
}, 10);
Are you sure your image at img/domino/21.png exists? The following code works for me in Firebug's console.
var img = new Image();
var onload = function() {
console.log('load');
}
img.onload = onload;
img.src = "http://img.gawkerassets.com/img/17m7otdiw6n8fjpg/original.jpg?" + (new Date()).getMilliseconds();
If you can use jQuery it can be simple:
$('img').load(foo).error(foo);
Or with vanilla javascript:
img.onload = img.onerror = foo;
var img = new Image();
//blah blah...
img.addEventListener("load",function() {
console.log("Loaded!");
});
Related
I need to load multiple image asynchronously from file field and them check if the dimensions are valid or not. I am pretty close, I just need to get the height of previously loaded image on call back. This is my effort so far:
let files = this.fileUpload.files; //get all uploaded files
for (var i = 0, f; f = files[i]; i++) { //iterate over uploaded file
console.log(f);
let img = new Image();
img.name=f.name;
img.size=f.size;
img.onload = () =>{alert(img.height)} //it is giving height here
if (img.complete) { //callback
alert(img.name + 'loaded');
load_count++;
library_store.uploaded_image.push(
{
height:img.height,
width:img.width, // not coming, just wondering how to get
//the image height from load
name:img.name,
size:img.size
}
);
}
if(load_count === uploaded_file_count){ // if all files are loaded
//do all validation here , I need height and width here
}
What is the best way to do this?
Wouldn't you want to move library_store logic to img.onload? Like below:
let files = this.fileUpload.files; //get all uploaded files
for (var i = 0, f; f = files[i]; i++) { //iterate over uploaded file
console.log(f);
let img = new Image();
img.name=f.name;
img.size=f.size;
img.onload = function() {
// hoping that ```this``` here refers to ```img```
alert(this.name + 'loaded');
load_count++;
library_store.uploaded_image.push({
height:this.height,
width:this.width,
name:this.name,
size:this.size
});
if(load_count === uploaded_file_count){ // if all files are loaded
//do all validation here , I need height and width here
}
}
// img.onload = () =>{alert(img.height)} //it is giving height here
/*
if (img.complete) { //callback
alert(img.name + 'loaded');
load_count++;
library_store.uploaded_image.push({
height:img.height,
width:img.width,
name:img.name,
size:img.size
});
if(load_count === uploaded_file_count){ // if all files are loaded
//do all validation here , I need height and width here
}
}
*/
}
First let's see why you will always fall in this if(img.complete) block even though your images have not been loaded yet:
The complete property of the HTMLImageElement only tells if its resource is being loaded at the time you get the property.
It will report true if the loading succeed, failed, and if the src has not been set.
var img = new Image();
console.log('no-src', img.complete);
img.onerror = function() {
console.log('in-error', img.complete);
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="
};
img.onload = function() {
console.log('in-load', img.complete);
}
img.src = "/some/fake-path.png";
console.log('while loading', img.complete);
And, at the time you get it, you didn't set this src attribute yet, so it will report true even though your image has not yet loaded its resource.
So what you want is an image preloader:
function preloadImages(srcArray, mustAllSucceed) {
return Promise.all(srcArray.map(loadImage));
function loadImage(src) {
return new Promise((resolve, reject) => {
var img = new Image();
img.onload = success;
img.onerror = mustAllSucceed ? success : reject;
img.src = src;
function success() {
resolve(img)
};
});
}
}
preloadImages(['https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg', 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Gran_Mezquita_de_Isfah%C3%A1n%2C_Isfah%C3%A1n%2C_Ir%C3%A1n%2C_2016-09-20%2C_DD_34-36_HDR.jpg'])
.then(images => {
images.forEach(img => console.log(img.src, img.width, img.height));
}, true);
I'm creating a canvas and using drawImage() to draw an inline svg. Everything works okay but I'm stuck because of the below problem...
My problem is that the onload handler not responding in IE?? Rhis works in FF and chhrome. How do I fix it to work in IE 9 upwards?
img2.onload = function() {
console.log("load");
}
jsFiddle
function createme() {
var test = $('<canvas />', { id : 'mycanvs' })
$('#album').append(test);
var svg2 = document.getElementById('sSource').innerHTML,
vms = test[0], //canvas
ctx2 = vms.getContext('2d');
svgToImage(svg2);
function svgToImage(svg2) {
var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
img2 = new Image;
alert("just before onload")
img2.onload = function() {
console.log("load"); // does not show
}
img2.src = nurl;
}
}
I don't have an IE VM running at the moment, but according to their docs the handler has to be defined before the object itself:
To ensure that an event handler receives the onload event for these
objects, place the script object that defines the event handler before
the object and use the onload attribute in the object to set the
handler.
I don't see why your code wouldn't work in IE, but this fiddle tweaks it slightly so your handler is defined before you create the image object... give this a try:
function createme() {
var test = $('<canvas />', { id : 'mycanvs' });
var onloadHandler = function() {
console.log("load");
};
$('#album').append(test);
var svg2 = document.getElementById('sSource').innerHTML,
vms = test[0], //canvas
ctx2 = vms.getContext('2d');
function svgToImage(svg2) {
var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
img2 = new Image;
img2.onload = onloadHandler
img2.src = nurl;
}
svgToImage(svg2);
}
createme();
https://jsfiddle.net/z769z7af/10/
function handleonload(url , callback)
{
var img = new Image();
img.onError = function() {
alert('Cannot load image: "'+url+'"');
};
img.crossOrigin = '';
img.onload = function() {
callback(img);
};
img.src = url;
}
handleonload(imageurl,callbackfunction);
I am using this function for multiple images ? But i am not getting a correctly map output images some of them are repeated
Try imagesLoaded: http://imagesloaded.desandro.com/
Usage is straightforward: imagesLoaded( elem, callback );
I have some divs that has a class named class='tweetCon'
each containing 1 image and I want to check if the image source exist or not so if it is available I dont do anything but if not I will change the image source with an appropriate image my code is as follow:
$('.tweetimgcon').children('img').each(function () {
imageExists($(this).attr("src"), function (exists) {
if (exists == true) {
} else {
$(this).attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png");
}
}, function () {
});
});
and also imageExists() is as follow:
function imageExists(url, callback,callback2) {
var img = new Image();
img.onload = function() { callback(true);callback2(); };
img.onerror = function() { callback(false);callback2(); };
img.src = url;
}
now the problem is that the src for the images that are not available does not set properly though when I check the src of those images by console.log it shows that they are properly set but it is not shown and when I use inspect element of chrome I can see that src is not set . Can anyone help me?
The point is $(this) doesn't point to your object, because you call $(this) inside your imgExists callback function but NOT the jQuery callback function each, so the this object doesn't point to your original img tag!
The solution should be save the object reference first, try the below:
$('.tweetimgcon').children('img').each(function () {
var _this = $(this);
imageExists($(this).attr("src"), function (exists) {
if (exists == true) {
} else {
_this.attr("src", "https://pbs.twimg.com/profile_images/2284174758/v65oai7fxn47qv9nectx.png");
}
}, function () {
});
});
Just for a little tip for a better callback function use call.
function imageExists(url, cb, ecb) {
var img = new Image();
img.onload = function() { cb.call(img,true,url); };
img.onerror = function() { ecb.call(img,false,url); };
img.src = url;
}
I added img as the first argument and that will then be your this keyword instead of window.
Testing Bin
I try to load an image as such:
var img = new Image();
img.src = 'mars.png';
img.onLoad = callback;
function callback(){
// doesnt fire
alert("loaded");
}
the callback never fires, whats the workaround?
You MUST define the onload BEFORE you change the src and event handlers are lowercase so it is spelled onload
var img = new Image();
img.onload = callback;
img.src = 'mars.png';
function callback(){
alert("loaded");
}
or as I prefer it
var img = new Image();
img.onload = function(){
alert("loaded");
}
img.src = 'mars.png';
Have you tried these?
var img = new Image();
img.src = 'mars.png';
img.onLoad = function(){
// doesnt fire
alert("loaded");
};
mplungjan is right you can use these instead:
img.onload = function(){
// doesnt fire
alert("loaded");
};
with lower l in onLoad